Кнопка закрытия всплывающей подсказки

Я использую 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

Вы также можете использовать параметры функции всплывающей подсказки, поэтому вам не нужно называть свои селекторы.

Это единственный способ, которым это сработало для меня, потому что моя всплывающая подсказка была сгенерирована внутри содержимого, загруженного ajax. Объект всплывающей подсказки дает вам доступ к DOM всплывающей подсказки, и использование исходного объекта лучше работает для динамического содержимого, классов или идентификаторов.

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