Question

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

Answer 1

即使您在元素上设置了data-container="body"，也可以根据附加到哪个元素将css类添加到工具提示中。

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

查看工作示例here

Answer 2

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

现在制作data-container="yep"

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

@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>

Answer 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项目中使用

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

3 个答案: