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

Posted 2023-03-05

【中文标题】在引导工具提示中对齐文本

【英文标题】：Aligning text in bootstrap tooltip

【发布时间】：2013-07-16 16:14:43

【问题描述】：

默认情况下，引导工具提示将文本居中对齐。我想向左对齐。有没有什么好的方法可以在 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>

【参考方案1】：

以下内容在 Bootstrap 版本 2.2.2、3.3.6 和 4 中运行良好：

.tooltip-inner 
    text-align: left;

【讨论】：

我必须使用 !important 或 .tooltip > .tooltip-inner 才能让它工作，我使用的是 Bootstrap 3.3.5

这对我来说效果很好，使用 Bootstrap 4，不需要 !important

【参考方案2】：

你试过这个吗？

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

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

虽然有官方文档 (source)，但我认为您不应该在工具提示标题属性中包含 HTML 代码。这是我推荐的：

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

同时按 p 引用段落是一个坏主意，因为您的文档中可能有很多。改为通过 id 引用：

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

【讨论】：

align="left" 无效@ruut。

为了澄清 Donny 的评论，在 HTML 标记中使用 align="left" 不是有效的 HTML5。 HTML5 方法是这个答案中描述的 CSS。

HTML 直接在 tooltip 标题属性中官方文档：getbootstrap.com/docs/4.0/components/tooltips

对于 Bootstrap 5，可以使用 text-start（而不是 Bootstrap 4 的 text-left 类），例如<p class="text-start">Text in tooltip</p>

【参考方案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'

【讨论】：

你在发帖前试过这个吗？不适用于 bootstrap bundle 4.4.1 - 您需要使用 css - 请参阅上面的 Tobias 答案。我无法访问 html，所以我注入了 css： $(function () $('head').append(' '););这对我有用。

几乎正确。只需添加一个像 <span data-toggle="tooltip" data-html="true" title="<p class='text-left'>Hello again<br/> this is tooltop</p>"> 这样的类，然后在 css 中设置它的样式（对于引导程序，这将默认对齐左侧的文本）

【参考方案4】：

只需添加一个类：

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

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

【参考方案5】：

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

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

【讨论】：

永远不要直接对 bootstrap.css 进行更改，而是编写自己的 css 文件并在引导程序包含后包含它。这仍然允许您覆盖默认行为，但允许您稍后升级引导程序而不会丢失手动覆盖。

破解来自第三方的文件总是一个坏主意。根本不要这样做 - 这肯定会回来咬你。 将会有更新，而你将会忘记你的技巧！

【参考方案6】：

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

【讨论】：

这不会向左对齐，而是将工具提示放在左侧。