2015-11-02 2 views
0

Я хотел бы включить интерактивный контент в всплывающую подсказку [, созданную с помощью Tooltipster]. Простой пример:Использование Mithril и Tooltipster

$('a').tooltipster({ 
    contentAsHTML: true, 
    content: '<span><a href="#">Tooltip click me</a></span>', 
    theme: 'tooltipster-light', 
    interactive: true 
}); 

http://jsfiddle.net/qrbsug8r/2/

Цель состоит в том, чтобы иметь «подсказку нажмите» мне ссылку в содержании Tooltip вызвать типичное Мифриловое цикл вытяжки.

Мои вопросы: как визуализировать содержимое всплывающей подсказки с помощью стандартного Mithril и как подключить событие onclick? Например, если бы я не использовал Tooltipster я мог бы сделать:

m('span', m('a', { 
     'href': '#', 
     'onclick': ctrl.someFunc 
    })) 

ответ

0

Как уже упоминалось Stephan, вы хотите использовать опцию конфигурации, чтобы получить функциональность tooltipster. Поскольку у вас есть HREF, вы могли бы просто использовать это и захватить маршрут:

m('a', { 
    config: function (el) { 
    $(el).tooltipster({ 
     contentAsHTML: true, 
     content: '<span><a href="/someAction">Tooltip click me</a></span>', 
     theme: 'tooltipster-light', 
     interactive: true 
    }); 
    } 
}); 

, если вы не хотите, чтобы изменить маршрут, вы можете добавить клик слушателя JQuery внутри функции конфигурации:

m('a', { 
    config: function (el) { 
    $(el).tooltipster({ 
     contentAsHTML: true, 
     content: '<span><a href="/#">Tooltip click me</a></span>', 
     theme: 'tooltipster-light', 
     interactive: true 
    }); 
    $(el).find('a').on('click', ctrl.callback); 
    } 
}); 

Поскольку это не обработчик событий, зарегистрированный через мифрил, вам нужно вручную перерисовать пользовательский интерфейс внутри ctrl.callback, используя m.redraw() (или start/endComput).

0

Вы можете сделать следующий

m('span', [ 
    m('a', { 
    href: '#', 
    onclick: function() { ctrl.tooltopVisible = true } 
    }), 
    ctrl.tooltipVisible ? m('.tooltip', 'Click me') : '' 
]) 
+0

Но куда этот код идет? Содержимое всплывающей подсказки (то есть вышеописанный блок кода) не находится в DOM, пока пользователь не переберет элемент. В это время Tooltipster отобразит содержимое. –

+0

Я просто понимаю, что вы не хотите использовать tooltipster. Вы должны использовать «config'-callback, если хотите это сделать. –

Смежные вопросы