问引导4工具提示文本-左对齐
EN

Stack Overflow用户

提问于 2020-08-18 07:18:57

回答 1查看 1.6K关注 0票数 0

我使用引导工具提示与html。

<span rel="tooltip" data-toggle="tooltip" data-trigger="hover" data-placement="right" data-html="true" data-title="{$some_html}">test</span>

我想设置文字-对齐内的工具提示向左。我发现的每一个相似的问题都通过以下方法解决：

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

但这似乎不适合我。

css

bootstrap-4

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-08-18 07:37:56

默认情况下，工具提示将适合内容宽度。因此，如果不更改工具提示的大小，就不会看到text-align: left!important;的结果。如果将最大宽度添加到工具提示中，您将看到它的影响：

$(document).ready(function() {
  $('[data-toggle="tooltip"]').tooltip();
});

.tooltip {
  width: 100px;
}

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

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <h3>Tooltip Example</h3>
    <a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>
  </div>

</body>

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/63463633

复制

相似问题

问引导4工具提示文本-左对齐
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导4工具提示文本-左对齐EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导4工具提示文本-左对齐
EN