使用秘银和工具提示

Question

我想在工具提示中包含交互式内容 [使用 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 click me" link 触发典型的秘银绘制周期。

我的问题是如何使用标准 Mithril 呈现工具提示内容，以及如何连接 onclick 事件？例如，如果我不使用 Tooltipster，我可能会这样做：

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

Answer 1

您可能会执行以下操作

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

Answer 2

正如 Stephan 提到的，您想使用配置选项来获取工具提示功能。因为你有一个 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).

使用秘银和工具提示

Use Mithril and Tooltipster

jquery

tooltipster

mithril.js