44

Bootstrap 工具提示默认将文本居中对齐。我想向左对齐。有没有什么好的方法可以在 HTML 中执行此操作，而不是修改 CSS 文件？

这是我的示例代码：

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

我已经尝试过，但没有奏效：

<p rel="tooltip" data-html="true" title="<p align='left'>Text in tooltip</p>">Hover over here</p>
4

6 回答 6

95

以下在 Bootstrap 版本 2.2.2、3.3.6 和 4 中运行良好：

.tooltip-inner {
    text-align: left;
}
于 2013-10-14T13:38:08.897 回答
23

你试过这个吗？

<style> 
 .tooltip.show p {
   text-align:left;
 }
</style>

注意：一旦工具提示可见，.show 会由引导程序自动添加。

尽管有官方文档（来源），但我认为您不应该在工具提示标题属性中包含 HTML 代码。这是我推荐的：

$("p").tooltip({
  html: true,
  title: '<p>Text in tooltip</p>'
});

也按 p 引用段落是一个坏主意，因为您的文档中可能有很多。改为通过 id 引用：

 <p id="myparagraph"> Hover over here </p>
 $("#myparagraph")
于 2013-07-17T22:22:36.287 回答
9

当您只想使用引导工具提示（使用 data-html）在工具提示中包含 html 时

这里的代码：

<span data-toggle="tooltip" data-html="true" title="<p style='text-align:left'>Hello again<br/> this is tooltop</p>">

附加说明，你应该使用 style='text-align:left' 而不是标签 align='left'

于 2018-01-24T08:30:13.093 回答
2

只需添加一个类：

<span data-toggle="tooltip" data-html="true" title="<p class='text-left'>Hello again<br/> this is tooltop</p>">

对于引导程序，这将默认对齐左侧的文本

于 2020-05-21T13:46:45.337 回答
1

在 bootstrap.css（或 bootstrap.min.css）中更改以下内容，也适用于 v3

.tooltip-inner{
...
text-align:center; //change to left
...
}
于 2015-10-26T16:17:56.730 回答
-3

添加 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>

字体：CSS 工具提示

于 2019-06-24T18:55:01.987 回答