11

我正在使用 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选择范围的方法吗？

4

3 回答 3

2

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

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

在此处查看一个工作示例

于 2016-03-16T11:18:10.360 回答
0

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>
于 2015-01-14T23:34:57.013 回答
0

在 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 项目

于 2019-05-20T21:21:19.230 回答