Question

在表单上，我有一个带bootstrap tooltip的图标。

工具提示使用整个网站使用的标准CSS宽度150px。

我想将此工具提示的CSS宽度从150px覆盖到400px，但也保留测试网站中出现的其他工具提示的150px宽度。

我怎样才能做到这一点？

这是我的代码HTML表单代码，用于将图标和工具提示添加到图标中：

$('#id_paragraph1_suggestion').after('<i id="id_icon_paragraph1_suggestion" class="fa fa-lightbulb-o blue_color icon_size18 no_decoration no_flicker_padding"></i>');

$("#id_icon_paragraph1_suggestion").tooltip({'html': true, 'title': 'Display suggestions to build your paragraph\n\nWe encourage you to mix & match different suggestions to complete your details.\n\nSimply replace the generic data with your own personalized information.'});

这是我的css代码，用于设置工具提示的宽度：

.tooltip-inner {
    max-width: 900px;
    white-space: pre-wrap
}
div[class="tooltip-inner"] {
    max-width: 150px
}

Answer 1

好的，这是答案。

将以下内容添加到.tooltip属性：

'template': '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner tooltip-suggestion"></div></div>'

所以，这是我更改的（最终）HTML代码（从OP更改）：

$('#id_paragraph1_suggestion').after('<i id="id_icon_paragraph1_suggestion" class="fa fa-lightbulb-o blue_color icon_size18 no_decoration no_flicker_padding"></i>');

$("#id_icon_paragraph1_suggestion").tooltip({'template': '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner tooltip-suggestion"></div></div>', 'html': true, 'title': 'Display suggestions to build your paragraph\n\nWe encourage you to mix & match different suggestions to complete your details.\n\nSimply replace the generic data with your own personalized information.'});

这是改变后的CSS代码：

.tooltip-inner {
    max-width: 900px;
    white-space: pre-wrap
}
div[class="tooltip-inner"] {
    max-width: 150px
}
.tooltip-suggestion {
    max-width: 400px;
}
div[class="tooltip-suggestion"] {
    max-width: 400px
}

我希望这会对某人有所帮助。

我为设置引用了此link。

Answer 2

虽然模板机制是执行此操作的正确方法，但我发现它很麻烦，而且我仍然希望将Bootstrap 4默认的工具提示添加到主体中（因此防止使用CSS嵌套选择器更改所选工具提示），因此我使用以下技术。

// Event handler for tooltips being shown on someSelector items,
// and for those tooltips we add an inline style
$(someSelector).on('inserted.bs.tooltip', function() {
  $("body div.tooltip-inner").css("max-width", "750px");
});

也就是说，我听“工具提示”节点或它的某些父节点，并捕获事件以说工具提示已被它们（或某个子节点）触发添加到DOM中，当我发现那是情况下，我在DOM中找到了工具提示，并向其中添加了内联样式。

这可以概括为“ data-tooltip-class”属性，然后处理程序可以将Class（）添加到实际的tooltip-inner中，但是对于我动态生成的内容，上面的方法可以正常工作。

bootstrap tooltip一个工具提示的特定宽度

2 个答案: