Html 对齐引导工具提示中的文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17711152/
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
Aligning text in bootstrap tooltip
提问by agerrr
Bootstrap tooltip aligns text to the middle by default. I'd like to align to the left. Is there any nice way of doing this within HTML, instead of modifying CSS file?
Bootstrap 工具提示默认将文本居中对齐。我想左对齐。有没有什么好的方法可以在 HTML 中做到这一点，而不是修改 CSS 文件？
Here is my sample code:
这是我的示例代码：
<p rel="tooltip" title="Text in tooltip I want to align">Hover over here</p>
<script type="text/javascript">
$(document).ready(function () {
$("p").tooltip();
});
</script>
I've already tried but it didn't work:
我已经试过了，但没有用：
<p rel="tooltip" data-html="true" title="<p align='left'>Text in tooltip</p>">Hover over here</p>
采纳答案by siemanko
Have you tried this one?
你试过这个吗？
<style>
.tooltip.show p {
text-align:left;
}
</style>
Note: .show is automatically added by bootstrap once the tooltip is visible.
注意：一旦工具提示可见，引导程序会自动添加 .show。
Although officially documented (source), I do not think you should include HTML code in the tooltip title attribute. This I recommended:
尽管官方记录（源），我认为您不应该在工具提示标题属性中包含 HTML 代码。这是我推荐的：
$("p").tooltip({
html: true,
title: '<p>Text in tooltip</p>'
});
Also referring to paragraph by p is a bad idea, as you could have many of them in your document. Refer by an id instead:
同时引用 p 段落是一个坏主意，因为您的文档中可能有很多。改为通过 id 引用：
<p id="myparagraph"> Hover over here </p>
$("#myparagraph")
回答by Tobias
This following works well in Bootstrap version 2.2.2, 3.3.6 and 4:
以下内容在 Bootstrap 版本 2.2.2、3.3.6 和 4 中运行良好：
.tooltip-inner {
text-align: left;
}
回答by Arief Setiabudi
when you want to include html in tooltip just using bootstrap tooltip (using data-html)
当您想仅使用引导工具提示（使用 data-html）在工具提示中包含 html 时
here the code :
这里的代码：
<span data-toggle="tooltip" data-html="true" title="<p style='text-align:left'>Hello again<br/> this is tooltop</p>">
additional note, you should use style='text-align:left' instead just tag align='left'
附加说明，您应该使用 style='text-align:left' 而不是标记 align='left'
回答by karim sallami
Change the following in your bootstrap.css (or bootstrap.min.css), works also for v3
在 bootstrap.css（或 bootstrap.min.css）中更改以下内容，也适用于 v3
.tooltip-inner{
...
text-align:center; //change to left
...
}
回答by Altin
Just add a class:
只需添加一个类：
<span data-toggle="tooltip" data-html="true" title="<p class='text-left'>Hello again<br/> this is tooltop</p>">
<span data-toggle="tooltip" data-html="true" title="<p class='text-left'>Hello again<br/> this is tooltop</p>">
for bootstrap this will align the text left by default
对于引导程序，这将默认对齐左侧的文本
回答by Leandro Amarilha
Adddata-placement="left"
添加data-placement="left"
<a href="#" data-toggle="tooltip" data-placement="top" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="bottom" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="left" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="right" title="Hooray!">Hover</a>
Font: CSS Tooltip
字体：CSS 工具提示
