Problem with tooltip in Advanced option

Hi, you can answer when you are available. I just leave it open. I want to add copy to clipboard button (share button) into the search result. Here is what I do.

Use two libraries:

https://cdn.jsdelivr.net/npm/[email protected]/dist/clipboard.min.js
https://unpkg.com/@primer/css@^20.2.4/dist/primer.css

Put this code in a page: (The code from a demo page of the clipboard.js library)

var clipboardDemos=new ClipboardJS('[data-clipboard-demo]');clipboardDemos.on('success',function(e){e.clearSelection();console.info('Action:',e.action);console.info('Text:',e.text);console.info('Trigger:',e.trigger);showTooltip(e.trigger,'Copied!');});clipboardDemos.on('error',function(e){console.error('Action:',e.action);console.error('Trigger:',e.trigger);showTooltip(e.trigger,fallbackMessage(e.action));});

    var btns=document.querySelectorAll('.btn');for(var i=0;i<btns.length;i++){btns[i].addEventListener('mouseleave',clearTooltip);btns[i].addEventListener('blur',clearTooltip);}
function clearTooltip(e){e.currentTarget.setAttribute('class','btn');e.currentTarget.removeAttribute('aria-label');}
function showTooltip(elem,msg){elem.setAttribute('class','btn tooltipped tooltipped-s');elem.setAttribute('aria-label',msg);}
function fallbackMessage(action){var actionMsg='';var actionKey=(action==='cut'?'X':'C');if(/iPhone|iPad/i.test(navigator.userAgent)){actionMsg='No support :(';}
else if(/Mac/i.test(navigator.userAgent)){actionMsg='Press ⌘-'+actionKey+' to '+action;}
else{actionMsg='Press Ctrl-'+actionKey+' to '+action;}
return actionMsg;}
hljs.initHighlightingOnLoad();

And two buttons to test:

<button class="btn" data-clipboard-demo data-clipboard-action="copy" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">Copy to clipboard</button>
<button class="btn" data-clipboard-demo data-clipboard-action="copy" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">Copy to clipboard</button>

Now test the buttons by clicking on a button, you will see a tooltip in the dropdown. When you move your mouse a way, you will see the tooltip disapear and when you move the mouse on the clicked button again you will not see the tooltp again. This is normal behavour.

Now try add this button

<button class="btn" data-clipboard-demo data-clipboard-action="copy" data-clipboard-text="{titlefield}">{titlefield}</button>

in the Advanced option box. Now the point is the tooltip comes back when you click on a button, move mouse away and move back to the clicked button. The tooltip shouldn’t show on hover when you move the mouse back to the clicked button, which is not the same behavour like in the above mention.

• This topic was modified 3 years, 3 months ago by kokosan.
• This topic was modified 3 years, 3 months ago by kokosan.
• This topic was modified 3 years, 3 months ago by kokosan.
• This topic was modified 3 years, 3 months ago by kokosan.
• This topic was modified 3 years, 3 months ago by kokosan.
• This topic was modified 3 years, 3 months ago by kokosan.