html - 一个工具提示的 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

虽然模板机制是执行此操作的正确且有记录的方法，但我发现它很麻烦，而且我仍然喜欢将 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 但对于我动态生成的内容，上面的工作正常。