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

时间:2013-07-17 22:10:18

标签: html twitter-bootstrap tooltip text-alignment jquery-tooltip

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

6 个答案:

答案 0 :(得分:77)

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

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

答案 1 :(得分:16)

你试过这个吗?

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

答案 2 :(得分:1)

在bootstrap.css(或bootstrap.min.css)中更改以下内容,也适用于v3

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

答案 3 :(得分:1)

当你想在工具提示中包含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'

答案 4 :(得分:0)

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

答案 5 :(得分:0)

只需添加一个类:

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

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