Бутон за затваряне на Tooltipster

Използвам 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');
    });

button hide jquery tooltip tooltipster
person Sarah    schedule 22.09.2014    source източник
comment
Разбрах, че ще се затвори, ако този код е прикрепен към бутон извън подсказката. Не съм много сигурен какво да правя в този момент..   -  person Sarah    schedule 23.09.2014
comment
Не съм пробвал този плъгин, но намерих това за затваряне на подсказка. Дано помогне. $('.tooltip-email-share').data('plugin_tooltipster').hideTooltip();   -  person DinoMyte    schedule 23.09.2014
comment
За съжаление няма зарове, все пак благодаря за съвета!   -  person Sarah    schedule 23.09.2014

Отговори (2)


arrow_upward
8
arrow_downward

Решението е (реклами към колега, че ми помогна с това):

Бутонът за затваряне не съществуваше в момента, в който го насочвах. Така че трябваше да добавя функция 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');
        });
    }
});
person Sarah    schedule 23.09.2014
comment
Току-що публикувах решение, което вероятно работи и във вашата нишка в Reddit, въпреки че това работи добре! - person Ennui; 23.09.2014
comment
Ох рад! Щях да проверя там. Благодаря, че отделихте време да го разгледате :) Оценявайте го. - person Sarah; 23.09.2014

arrow_upward
2
arrow_downward

Можете също да използвате параметрите на функцията tooltipster, така че да не се налага да наименувате вашите селектори.

Това е единственият начин, по който работи за мен, защото подсказката ми беше генерирана в съдържание, заредено с ajax. Обектът на подсказката ви дава достъп до DOM на подсказката и използването на обекта на произход работи по-добре за динамично съдържание, класове или идентификатори.

functionReady: function(origin, tooltip) {
    $(tooltip).on( 'click', '. tt-close', function(){
        $(origin).tooltipster('hide');
    });
}
person Community    schedule 28.05.2015