使用自动生成的 id 将 min-width 添加到 Bootstrap 的特定工具提示答案

【问题标题】：Add min-width to an specific tooltip of Bootstrap with autogenerated id使用自动生成的 id 将 min-width 添加到 Bootstrap 的特定工具提示
【发布时间】：2020-02-04 17:58:58
【问题描述】：

我有一个带有 thymeleaf 的 html 视图。这个 html 有一个大表，其中包含各种样式的工具提示，它们可以正常工作，但现在我不会在特定列中的工具提示中添加 mi-width。 id 以commentTooltip 开头的那些。

用thymeleaf 生成的每一个都有一个以commentTootip 开头的id。

我尝试了许多可能的解决方案，但都没有成功。现在我想我快要找到解决方案了，但我做不到。因为问题是如何访问 .tooltip-inner 女巫是在 de DOM 准备好后由 bootstrap 动态生成的。

我现在的解决办法是：

<td id="commentTooltip6H78SHF data-html="true" data-toggle="tooltip" data-original-title='Tooltip Text One'>
<td id="commentTooltip8RQ671S data-html="true" data-toggle="tooltip" data-original-title='Tooltip Text two'>



$('td')
  .filter(function() {
    return this.id.match(/commentTooltip*/);
  }).next($('.tooltip > .tooltip-inner')).attr('min-width','400px');

有了这个片段，我可以选择所有我想要更改的内容，但我的问题是导航到生成的工具提示属性。

$('td')
.filter(function() {
 return this.id.match(/commentTooltip*/);
 })

感谢您的帮助

【问题讨论】：

没有属性min-width，有属性style可以有属性min-width。请参考这个stackoverflow.com/questions/3730035/…
How to change CSS using jQuery?的可能重复
好的，是的，但这不是问题，在这种情况下，问题是关于如何访问由boostrap生成的tooltip-inner
How to get CSS to select ID that begins with a string (not in Javascript)?的可能重复
好吧，您实际上有两个问题-您正在尝试访问正确的ID-据我所知，您想访问其中一个工具提示而不是另一个？你遇到的另一个问题是一旦你有了它就改变它，你试图用 .attr 方法来做 - 那部分应该使用使用 Jquery 方法的 css。至于另一个，我不明白您选择一个工具提示而不是另一个工具提示的标准是什么？你能澄清一下吗？

标签： javascript jquery html css bootstrap-4

【解决方案1】：

正如有人评论的那样，可以使用[id^=commentTooltip]

^= 表示“以”开头。相反，$= 表示“以”结尾。 - How to get CSS to select ID that begins with a string (not in Javascript)?

因此，您可以轻松地将 minWidth CSS 属性应用于 ID 中包含 commentTooltip 的所有工具提示。

鉴于此 HTML：

<td id="commentTooltip8RQ671S" href="#">
 <span class="tooltip">tooltip</span> 
    click
</td>

要更改工具提示的样式，您必须这样做：

$('td[id^=commentTooltip]').on('mouseover', function() {
  let tooltip = $(this).children('.tooltip');

  tooltip.css({
   'display': 'inline-block', /* only for visualization */
   'minWidth': '300px'
  })
})

【讨论】：

这会更改元素，但不会更改 Bootsrtap 在悬停此时生成的工具提示
不要工作@Ivor。问题是引导程序生成的工具提示不是孩子。当我生成工具提示引导时添加一个随机属性describedby="tooltip32634"，工具提示元素是一个新的<div id="tooltip32634" class="tootltip><div class="tooltip-inner"></div></div>