XF 2.2 Using XF's built-in "copy to clipboard"

JoyFreak

Well-known member
I'm trying to work out how to use the built-in copy to clipboard feature.

So I've created a custom user field where by it displays the value in a tooltip. Like so:

Value display HTML:
Code:
<img src="/styles/joyfreak/nintendo.png" data-xf-init="tooltip" title="{$value}" style="margin-bottom: -2px;">

Wrapper display HTML:
Code:
<span style="display: inline-block; margin-right: 6px;">{$value}</span>

I'm trying to get it so when a user clicks on the icon, it would copy the value to clipboard. Can someone please advise me on how to achieve this?

Many thanks.
 
Solution
In general:
HTML:
<div data-xf-init="copy-to-clipboard" data-copy-text="yoink">Click me</div>

So, in this case, probably something like:
HTML:
<img src="/styles/joyfreak/nintendo.png" data-xf-init="tooltip copy-to-clipboard" title="{$value}" data-copy-text="{$value}" style="margin-bottom: -2px;" />
In general:
HTML:
<div data-xf-init="copy-to-clipboard" data-copy-text="yoink">Click me</div>

So, in this case, probably something like:
HTML:
<img src="/styles/joyfreak/nintendo.png" data-xf-init="tooltip copy-to-clipboard" title="{$value}" data-copy-text="{$value}" style="margin-bottom: -2px;" />
 
Solution
In general:
HTML:
<div data-xf-init="copy-to-clipboard" data-copy-text="yoink">Click me</div>

So, in this case, probably something like:
HTML:
<img src="/styles/joyfreak/nintendo.png" data-xf-init="tooltip copy-to-clipboard" title="{$value}" data-copy-text="{$value}" style="margin-bottom: -2px;" />
Beautiful. Thank you so much!
 
Top Bottom