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

Question

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

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

我想将这个工具提示的 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");
});

也就是说，我听 "tooltip'ed" 节点，或者它的某个父节点，并捕获事件，说明工具提示已添加到由它们（或某个子节点）触发的 DOM 中，当我检测到这种情况时，我在 DOM 中找到工具提示并向其添加内联样式。

这可以概括为类似于 "data-tooltip-class" 属性的东西，然后处理程序可以将 addClass() 添加到实际 tooltip-inner 但对于我动态生成的内容，上述工作正常。

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

bootstrap tooltip specific width for one tooltip

html

css

twitter-bootstrap

twitter-bootstrap-tooltip