Problem with tooltip in Advanced option

[kokosan]

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.

[Ernest Marcinko]

Hi,

I tried, but the tooltip reappears to me even after moving the mouse away, no matter where on the page I use the button: https://i.imgur.com/ZQpzF5A.png
I moved the mouse about 5 times, and the tooltip does not disappear.

You could very likely solve this easily by removing the “tooltipped” class from the button when it loses focus, maybe on the “mouseout” or “blur” events.

[kokosan]

At my end it works in a page (In the page tooltip doesn’t reapear on mouse hover.) but not work in the result. https://drive.google.com/file/d/1O8AHZ36AKLojoOKfwijxSHzK8aFasAEc/view?usp=sharing

[Ernest Marcinko]

That does not happen on my end, it simply reappears every time I hover, so that might be dependent on something else as well. I would simply add a mouseut event handler to remove the “tooltipped” and “tooltipped-s” classes from the button and call it a day, that could very likely resolve it. It’s probably 2 lines of code, and it is faster then debugging the whole script.

[kokosan]

Can you recommend which line of code to remove?

[Ernest Marcinko]

You actually need more code, an event handler for the mouseout event for the tooltip buttons to remove the class names, like:

$('body').on('mouseout', '.tooltipped-s', function(){
    $(this).removeClass('tooltipped tooltipped-s');
});

..or something similar. This is way beyond the scope of our support, you may need to ask a developer about this.

[kokosan]

I read again and now understnd “add a mouseut event handler to remove the “tooltipped” and “tooltipped-s” classes ” Thanks for pointing out the code.

[Author]

Posts