對齊引導工具提示中的文本

默認情況下，引導工具提示將文本對齊到中間。我想排在左邊。有沒有在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>

來源

2013-07-17 agerrr

您是否嘗試過這個？

<style> 
.tooltip > 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")

來源

2013-07-17 22:22:36 siemanko

.tooltip> p { 文本對齊：左; }是不需要的。添加align =「left」就足夠了 – Ruut

align =「left」無效@ruut。 –

要澄清Donny的評論，在HTML標記中使用'align =「left」'是無效的HTML5。 HTML5方法是這個答案中描述的CSS。 – drewsberry

對我來說，在引導2.2.2版本以下效果很好：

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

更新：這也適用於引導3.3.6。

來源

2013-10-14 13:38:08 Tobias

仍然適用於Bootstrap v3.1.1 – famousgarkin

即使沒有'！important' – famousgarkin

偉大的作品。將其標記爲正確的答案。 –

改變你bootstrap.css（或bootstrap.min.css）以下，作品也爲V3

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

來源

2015-10-26 16:17:56

不要直接改變bootstrap.css，而是寫自己的css文件並且在引導包含之後包含這個。這仍然允許您覆蓋默認行爲，但允許您稍後升級引導而不會丟失手動覆蓋。 – mtrolle

，當你想在HTML工具提示只使用引導提示（使用數據的HTML）

這裏的代碼：

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

來源

2018-01-24 08:30:13

對齊引導工具提示中的文本

回答

相關問題