web-dev-qa-db-ja.com

bootstrap tooltipでのテキストの整列

ブートストラップツールチップは、デフォルトでテキストを中央に揃えます。左に揃えたいです。 CSSファイルを変更する代わりに、HTML内でこれを行う良い方法はありますか？

これが私のサンプルコードです。

<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>
htmltwitter-bootstraptooltiptext-alignmentjquery-tooltip
34
agerrr

これを試してみましたか？

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

注：.showは、ツールチップが表示されるとbootstrapによって自動的に追加されます。

公式に文書化されていますが（ source ）、ツールヒントのtitle属性にHTMLコードを含めるべきではないと思います。これは私がお勧めします：

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

また、pで段落を参照するのは悪い考えです。文書にそれらの多くを含めることができるからです。代わりにIDで参照します。

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

以下は、Bootstrapバージョン2.2.2、3.3.6および4でうまく機能します。

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

bootstrap tooltip（data-htmlを使用）を使用してHTMLをツールチップに含めたい場合

ここにコード：

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

追加のメモ、単にalign = 'left'をタグ付けする代わりに、style = 'text-align：left'を使用する必要があります

4
Arief Setiabudi

Bootstrap.css（またはbootstrap.min.css）で以下を変更します。v3でも動作します

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

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

0
Leandro Amarilha