Clever Geek Handbook

Popup close button

I am using tooltipster and have a tooltip that shows when a menu button is clicked (this bit works fine). However, I am having trouble closing the tooltip using the close button inside the tooltip.

I need to skip something pretty simple.

Html

<span class="tooltip-email-share"> Stuff </span>

<!-- is triggered by this link -->
<ul>
 <...>
 <li><a class="menu-share"></a></li>
 <...>
</ul>

HTML for tooltip (just in case)

<div class="tt-email-share">
    <span class="tt-close"></span>
    <h1>Title</h1>
    <form>
    </form>
</div>

Js

// initiates the tooltip - trigger set to custom & autoClose is false, so it wont close without pressing the close button.

$('.tooltip-email-share').tooltipster({
    theme: 'tooltipster-html-shadow',
        interactive: 'true',
        autoClose: 'false',
        position: 'bottom',
        speed: '200',
        trigger: 'custom',
    content: $('HTML Stuff in here')
    });

// Shows the tooltip (this bit works a charm)

    $('.menu-share').click(function(){
        $('.tooltip-email-share').tooltipster('show');    
    }); 

// *should* close the tooltip (doesn't work)

    $('.tt-close').click(function(){
        $('.tooltip-email-share').tooltipster('hide');
    });
+3


source to share


2 answers


Solution (props to a colleague for helping me with this):

The close button did not exist at the time I configured it. So I had to add a functionReady function to trigger the script click after the tooltip was loaded.



Works great.

$('.tooltip-email-share').tooltipster({
    theme: 'tooltipster-html-shadow',
    interactive: 'true',
    autoClose: 'false',
    position: 'bottom',
    speed: '200',
    trigger: 'custom',
    content: $('HTML stuff in here'),
// new function here 
    functionReady: function(){ 
        $('.tt-close').click(function(){
            $('.tooltip-email-share').tooltipster('hide');
        });
    }
});
+7


source


You can also use the parameters of the tooltipster function, so you don't need to name your selectors.

This is the only way for me, because my tooltip was created inside the loaded ajax content. The tooltip object gives you access to the DOM tooltip, and using the original object works better for dynamic content, classes, or ids.



functionReady: function(origin, tooltip) {
    $(tooltip).on( 'click', '. tt-close', function(){
        $(origin).tooltipster('hide');
    });
}
+1


source






More articles:


All Articles