4

我正在使用tooltipster，并且有一个工具提示，显示单击菜单按钮的时间（此位工作正常）。不过，我在使用工具提示中的关闭按钮关闭工具提示时遇到问题。

我一定错过了一些非常简单的东西。

HTML

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

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

工具提示的 HTML（以防万一）

<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');
    });
4

2 回答 2

8

解决方案是（帮助我解决这个问题的同事的道具）：

关闭按钮在我定位它的时间点不存在。因此，一旦加载了工具提示，我就必须添加一个 functionReady 函数来运行点击脚本。

完美运行。

$('.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');
        });
    }
});
于 2014-09-23T04:53:07.800 回答
2

您还可以使用 tooltipster 函数参数，这样您就不必命名您的选择器。

这是它对我有用的唯一方法，因为我的工具提示是在 ajax 加载的内容中生成的。tooltip 对象使您可以访问 tooltip DOM，并且使用 origin 对象更适合动态内容、类或 id。

functionReady: function(origin, tooltip) {
    $(tooltip).on( 'click', '. tt-close', function(){
        $(origin).tooltipster('hide');
    });
}
于 2015-05-28T23:10:51.663 回答