一个工具提示的引导工具提示特定宽度

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

也就是说，我监听“tooltip‘’ed”节点或其父节点，并捕获事件以告知由它们(或某个子节点)触发的DOM中添加了工具提示，当我检测到这种情况时，我会在DOM中找到工具提示并向其添加内联样式。

这可以概括为"data-tooltip-class“属性，然后处理程序可以addClass()到实际的工具提示-内部，但对于我的动态生成的内容，上面的工作很好。