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 に答える