twitter-bootstrap Bootstrap 工具提示 data-container=body 并限制 .tooltip-inner 上的 css 范围
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27954381/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap tooltip data-container=body and limit scope of css on .tooltip-inner
提问by Jason
I am using bootstrap 3.3 tooltips and had an issue with the tooltips being cropped/hidden. I solved this by setting data-container="body".
我正在使用 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>
<!--...-->
Using these effects all of my tooltips - which is not what I want.
在我的所有工具提示中使用这些效果 - 这不是我想要的。
However, I want to set a specific style on the .tooltip-inner only for a subset of tooltips on the page. These tooltips are now however contained in bodyso the scope is more or less global.
但是，我只想为页面上的工具提示子集在 .tooltip-inner 上设置特定样式。然而，这些工具提示现在包含在其中，body因此范围或多或少是全球性的。
I can only access .tooltip-inner for these using:
我只能使用以下方法访问 .tooltip-inner ：
body .tooltip-inner {
background-color: #40a0d0;
}
or
或者
.tooltip-inner {
background-color: #40a0d0;
}
How do I set a different data-container? (I have tried classes and id's) Or can anyone suggest a way to limit the scope of .tooltip-innerselection?
如何设置不同的data-container？（我已经尝试过类和 id）或者任何人都可以提出一种限制.tooltip-inner选择范围的方法吗？
回答by Ferrard
There is a way to add a css class to a tooltip based on which element it is attached to, even if you have set data-container="body"on the element.
有一种方法可以根据它所附加的元素将 css 类添加到工具提示中，即使您已data-container="body"在该元素上设置。
$('.element1')
.tooltip()
.each(function() {
$(this).data('bs.tooltip').tip().addClass('tooltip-class1');
});
See a working example here
在此处查看工作示例
回答by wctiger
Having this issue in an Angular 4 project. By going through Bootstrap 3's document again I see there's an API called 'template' which can be used to override default classes. Here is what I come up with:
在 Angular 4 项目中遇到此问题。通过再次浏览 Bootstrap 3 的文档，我看到有一个名为“模板”的 API，可用于覆盖默认类。这是我想出的：
In JS:
在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
});
Then in my global CSS:
然后在我的全局 CSS 中：
.tooltip-inner.my-tooltip-inner {
max-width: 500px;
background: #f2f2f2;
/*do whatever you want*/
}
FYI - I believe using data-template attribute should also work in non-Angular projects
仅供参考 - 我相信使用 data-template 属性也应该适用于非 Angular 项目
回答by Sanova
http://jsfiddle.net/62p0u2nr/Try putting all that in a div with a unique ID name (I called mine "yep").
http://jsfiddle.net/62p0u2nr/尝试将所有内容放在具有唯一 ID 名称的 div 中（我称我的为“是”）。
Now make the data-container="yep"
现在使 data-container="yep"
Now the .tooltip-inneris accessible straight away from the css.
现在.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>
