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

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>

另外我不认为在工具提示标题中包含HTML代码.你应该做的是:

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

同样提到段落p是一个坏主意,因为你可以在你的文档中有很多.请改为使用id:

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

Answer 3

当您想仅使用引导工具提示（使用 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'