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

我想这样做的原因是因为我正在对'#abc'进行动态css更改，并且每次工具提示器显示我都希望将最近的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();
    }
});

tooltipster - 将div设为'content'，内容中反映的div中的css更改

2 个答案: