jquery - Use Mithril and Tooltipster

Question

I'd like to include interactive content in a tooltip [that's created using Tooltipster]. A simple example:

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

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

The goal is to have the "Tooltip click me" link in the Tooltip content trigger a typical Mithril draw cycle.

My questions are how do I render the tooltip content using standard Mithril, and how do I hookup the onclick event? For example, if I were not using Tooltipster I might do:

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

Answer 1

正如 Stephan 提到的，您想使用 config 选项来获取工具提示功能。由于您有一个 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);
  }
});

因为这不是通过 mithril 注册的事件处理程序，所以您必须手动使用 m.redraw()（或 start/endComputation）在 ctrl.callback 内重绘 UI。

Answer 2

您可以执行以下操作

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