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

【问题标题】：tooltipster - make div as 'content' with css changes in div reflected in contenttooltipster - 将 div 设为“内容”，并将 div 中的 css 更改反映在内容中
【发布时间】：2014-03-25 05:54:25
【问题描述】：

我想为工具提示内容分配一个 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())
    });
});

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

谢谢

【问题讨论】：

标签： html tooltipster

【解决方案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();
    }
 });

那就更好了！ :) 但请确保您的工具提示内容就在您的选择器之后

【讨论】：

【解决方案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();
    }
});

【讨论】：