使用Mithril和Tooltipster

我想在工具提示中包含交互式内容[使用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/

的目标是在工具提示内容的“工具提示点击我”链接触发一个典型的秘银抽奖周期。

我的问题是如何使用标准Mithril渲染工具提示内容，以及如何连接onclick事件？例如，如果我没有使用Tooltipster我可能会做：

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

来源

2015-11-02 Marvin Winks

正如斯蒂芬提到的，你要使用的配置选项以获得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); 
    } 
});

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

来源

2015-11-03 05:58:09 dcochran

您不妨做到以下几点

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

来源

2015-11-02 21:26:19

但是代码去哪了？工具提示内容（即上述代码块）不在DOM中，直到用户将鼠标移到元素上。那时，Tooltipster将呈现内容。 –

我只是明白，你不想使用tooltipster。如果你想这样做，你必须使用'config'-callback。 –

使用Mithril和Tooltipster

回答

相关问题