使用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

回答

相關問題