Problem with tooltip in Advanced option

Home Forums Product Support Forums Ajax Search Pro for WordPress Support Problem with tooltip in Advanced option

This topic contains 6 replies, has 2 voices, and was last updated by kokosan kokosan 1 year ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #41451
    kokosan
    kokosan
    Participant

    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 1 year ago by kokosan kokosan.
    • This topic was modified 1 year ago by kokosan kokosan.
    • This topic was modified 1 year ago by kokosan kokosan.
    • This topic was modified 1 year ago by kokosan kokosan.
    • This topic was modified 1 year ago by kokosan kokosan.
    • This topic was modified 1 year ago by kokosan kokosan.
    #41466
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    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.

    Best,
    Ernest Marcinko

    If you like my products, don't forget to rate them on codecanyon :)


    #41480
    kokosan
    kokosan
    Participant

    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

    #41491
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    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.

    Best,
    Ernest Marcinko

    If you like my products, don't forget to rate them on codecanyon :)


    #41514
    kokosan
    kokosan
    Participant

    Can you recommend which line of code to remove?

    #41516
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    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.

    Best,
    Ernest Marcinko

    If you like my products, don't forget to rate them on codecanyon :)


    #41518
    kokosan
    kokosan
    Participant

    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.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.