Question

我有一个HTML页面，其中包含许多使用Bootstrap工具提示插件的工具提示的链接。我找到了以下CSS来改变工具提示的宽度：

.tooltip-inner { max-width: 350px; }

虽然这样可行，但它会将我的所有工具提示更改为此宽度。如果我想换一个怎么办？我尝试过这个，但它无法正常工作：

<style rel="stylesheet" type="text/css">    
#my_tooltip .tooltip-inner { max-width: 350px; }
</style>

<a id="my_tooltip" href="#" data-toggle="tooltip" data-placement="bottom" title="tooltip content">This is a tooltip</a>

Answer 1

可能最好通过jquery来做。但是css也会起作用：

#my_tooltip + .tooltip .tooltip-inner { width: 350px; }

这是js：

$(function () {
$('#my_tooltip').tooltip().on("mouseenter", function () {
    var $this = $(this),
    tooltip = $this.next(".tooltip");
    tooltip.find(".tooltip-inner").css({
        width: "350px",
    });
 });
});

Answer 2

以下解决方案对我有用

    $(yourselectorname).on('inserted.bs.tooltip', function () {
    $("body div.tooltip-inner").css("max-width", "500px");
    });

一个工具提示的Bootstrap设置宽度

2 个答案: