使用秘银和工具提示器答案

【问题标题】：Use Mithril and Tooltipster使用秘银和工具提示器
【发布时间】：2015-11-02 21:14:28
【问题描述】：

我想在 [使用 Tooltipster 创建的] 工具提示中包含交互式内容。一个简单的例子：

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

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

目标是让工具提示内容中的“工具提示点击我”链接触发典型的秘银绘制周期。

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

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

【问题讨论】：

标签： jquery tooltipster mithril.js

【解决方案1】：

正如 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
    });
  }
});

如果你不想改变路由，你可以在 config 函数中添加一个 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。

【讨论】：

【解决方案2】：

你可以这样做

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

【讨论】：

但是该代码去哪里了？在用户将鼠标悬停在元素上之前，工具提示内容（即上面的代码块）不在 DOM 中。届时，Tooltipster 会渲染内容。
我只是了解您不想使用工具提示器。如果你想这样做，你必须使用config-callback。