0

I'd like to include interactive content in a tooltip [that's created using Tooltipster]. A simple example:

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

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

The goal is to have the "Tooltip click me" link in the Tooltip content trigger a typical Mithril draw cycle.

My questions are how do I render the tooltip content using standard Mithril, and how do I hookup the onclick event? For example, if I were not using Tooltipster I might do:

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

2 に答える 2

0

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

これはミスリルを介して登録されたイベント ハンドラーではないため、m.redraw() (または start/endComputation) を使用して ctrl.callback 内で手動で UI を再描画する必要があります。

于 2015-11-03T05:58:09.250 に答える
0

あなたは次のことをするかもしれません

m('span', [
  m('a', {
    href: '#',
    onclick: function() { ctrl.tooltopVisible = true }
  }),
  ctrl.tooltipVisible ? m('.tooltip', 'Click me') : ''
])
于 2015-11-02T21:26:19.670 に答える