引导工具提示 data-container=body 并限制 .tooltip-inner 上的 css 范围答案

【问题标题】：Bootstrap tooltip data-container=body and limit scope of css on .tooltip-inner引导工具提示 data-container=body 并限制 .tooltip-inner 上的 css 范围
【发布时间】：2015-01-14 23:26:36
【问题描述】：

我正在使用 bootstrap 3.3 工具提示，但遇到了工具提示被裁剪/隐藏的问题。我通过设置data-container="body" 解决了这个问题。

<!--...-->
<span class="callOutImg">
  <a href="#" data-toggle="tooltip" data-container="body" data-placement="top" class="optionTooltip" title="Hello my name is Inigo Montoya">
    <img src='/images/info-bubble-big.png' />
  </a>
</span>
<!--...-->

我的所有工具提示都使用这些效果 - 这不是我想要的。

但是，我只想在 .tooltip-inner 上为页面上的工具提示子集设置特定样式。然而，这些工具提示现在包含在 body 中，因此范围或多或少是全球性的。

我只能使用以下方式访问 .tooltip-inner：

body .tooltip-inner {
  background-color: #40a0d0;
}

或

.tooltip-inner {
  background-color: #40a0d0;
}

如何设置不同的data-container？（我已经尝试过类和id）或者任何人都可以提出一种限制.tooltip-inner选择范围的方法吗？

【问题讨论】：

标签： twitter-bootstrap twitter-bootstrap-tooltip data-containers

【解决方案1】：

有一种方法可以根据附加到的元素将 css 类添加到工具提示中，即使您在元素上设置了data-container="body"。

$('.element1')
    .tooltip()
    .each(function() {
        $(this).data('bs.tooltip').tip().addClass('tooltip-class1');
    });

查看工作示例here

【讨论】：

【解决方案2】：

http://jsfiddle.net/62p0u2nr/ 尝试将所有内容放在一个具有唯一 ID 名称的 div 中（我称我的为“是的”）。

现在制作data-container="yep"

现在.tooltip-inner 可以直接从 css 访问。

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
.tooltip-inner {
  background-color: #40a0d0;
}

<div id="yep">
  <span class="callOutImg">
    <a href="#" data-toggle="tooltip" data-container="yep" data-placement="top" class="optionTooltip" title="Hello my name is Inigo Montoya">
      <img src="http://placehold.it/350x150" />

    </a>
  </span>
</div>

【讨论】：

但是在这种情况下，您的 css 会选择页面上的所有工具提示。如果我使用 #yep .tooltip-inner{} 它不起作用

【解决方案3】：

在 Angular 4 项目中遇到此问题。通过再次浏览 Bootstrap 3 的文档，我看到有一个名为“模板”的 API，可用于覆盖默认类。这是我想出的：

在 JS 中：

// inject customized class into this tooltip so we can style it in global css without impact other tooltips.
    const tooltipTemplate = `
    <div class="tooltip" role="tooltip">
        <div class="tooltip-arrow my-tooltip-arrow"></div>
        <div class="tooltip-inner my-tooltip-inner"></div>
    </div>`;

    $('[data-toggle="tooltip"]').tooltip({
        template: tooltipTemplate
    });

然后在我的全局 CSS 中：

.tooltip-inner.my-tooltip-inner {
   max-width: 500px;
   background: #f2f2f2;
   /*do whatever you want*/
 }

仅供参考 - 我相信使用 data-template 属性也应该适用于非 Angular 项目

【讨论】：