html - tooltipster - 将 div 设为“内容”，并将 div 中的 css 更改反映在内容中

Question

我想为工具提示内容分配一个 div。一种方法是使用网站示例中给出的内联 div：

$(document).ready(function() {
    $('#my-tooltip').tooltipster({
        content: $('<span><img src="my-image.png" /> <strong>This text is in bold case !</strong></span>')
    });
});

但是我想要的是让 div 单独定义如下：

<span id='abc'><span><img src="my-image.png" /> <strong>This text is in bold case !</strong></span></span>

然后将内容定义为

$(document).ready(function() {
    $('#my-tooltip').tooltipster({
        content: $($('#abc').html())
    });
});

我想这样做的原因是因为我正在对工具提示器进行动态css更改，'#abc'并且每次工具提示显示我希望合并最近更改的css。

谢谢

Answer 1

$('#my-tooltip').tooltipster({
    functionBefore: function(origin,continueTooltip){
    origin.tooltipster('content',origin.children().html());
    continueTooltip();
    }
 });

对我来说，改进了版本:)

 $('#my-tooltip').tooltipster({
    functionBefore: function(origin,continueTooltip){
    origin.tooltipster('content',origin.next().contents());
    continueTooltip();
    }
 });

那就更好了！:) 但请确保您的工具提示内容就在您的选择器之后 .tip 紧随在 div#my-tooltip 之后，并且也是它的子项。

Answer 2

除了单独定义内容之外，我还希望工具提示的内容嵌套在单击/悬停的元素内。我发现该functionBefore选项对我有用。

标记可能是：

<div id="my-tooltip">
    click/hover me to show a tooltip
    <div class="tip" style="display:none">
        tooltip<br>content
    </div>
</div>

和js：

$('#my-tooltip').tooltipster({
    functionBefore: function(origin,continueTooltip){
        origin.tooltipster('content',origin.find('.tip'));
        continueTooltip();
    }
});