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/

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

我的问题是如何使用标准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所提到的，您希望使用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
    });
  }
});

如果您不想更改路由，可以在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 个答案: