Tooltip with copy

Hey peterolle,

Thank you for the inquiry.

If I understand correctly, you wanted to copy the value of the data-copy attribute when the button is clicked? If so, you can try this html:

<button 
    type="button" 
    class="btn btn-default btn-copy js-tooltip js-copy pull-right" 
    data-toggle="tooltip" 
    data-placement="bottom" 
    data-copy="https://urltocopy.com/test/" 
    title="Copy URL" 
    onclick="var tempInput = document.createElement('textarea'); tempInput.value = this.getAttribute('data-copy'); document.body.appendChild(tempInput); tempInput.select(); document.execCommand('copy'); document.body.removeChild(tempInput); alert('URL copied to clipboard: ' + tempInput.value);">
    Copy URL
</button>

If you want to remove the notification, just delete this line:

 alert('URL copied to clipboard: ' + tempInput.value);

Best regards,
Ismael

Hi,

Thank you for the update.

The implementation above relies on the “data-copy” attribute, which cannot be added to any builder elements. You may need to manually copy the HTML into a code or text block. If you need it to look like a default builder button, you can try this html:

<div class="avia-button-wrap avia-button-center">
    <a href="javascript:void(0);" 
       class="avia-button av-lzt94u23-6a241e487832b9aa657eb8d56d62aa80 av-link-btn avia-icon_select-yes-left-icon avia-size-small avia-position-center avia-color-theme-color btn-copy js-tooltip js-copy"
       data-toggle="tooltip"
       data-placement="bottom"
       data-copy="https://urltocopy.com/test/"
       title="Copy URL"
       onclick="var tempInput = document.createElement('textarea'); tempInput.value = this.getAttribute('data-copy'); document.body.appendChild(tempInput); tempInput.select(); document.execCommand('copy'); document.body.removeChild(tempInput); alert('URL copied to clipboard: ' + tempInput.value);">
        <span class="avia_button_icon avia_button_icon_left" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></span>
        <span class="avia_iconbox_title">Click me</span>
    </a></div>

Best regards,
Ismael

Hi,

How can I change the music icon to a clipboard one or any other?

You can create a button with your preferred icon, then copy the value of the data-av_icon attribute. It may appear as a tilted rectangle, but it actually contains the character code for the icon.

<span class="avia_button_icon avia_button_icon_left" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></span>

Best regards,
Ismael