Question

默认情况下，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>

Answer 1

以下内容适用于Bootstrap版本2.2.2,3.3.6和4：

.tooltip-inner {
    text-align: left;
}

Answer 2

你试过这个吗？

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

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

虽然已正式记录（source），但我认为您不应在工具提示标题属性中包含HTML代码。我推荐这个：

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

同样引用p段是一个坏主意，因为你的文档中可能有很多。请改为使用id：

 <p id="myparagraph"> Hover over here </p>
 $("#myparagraph")

Answer 3

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

.tooltip-inner{
...
text-align:center; //change to left
...
}

Answer 4

当你想在工具提示中包含html时只使用bootstrap工具提示（使用data-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'

Answer 5

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

Answer 6

只需添加一个类：

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

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

在引导工具提示中对齐文本

6 个答案: