将部分数据工具提示文本设置为粗体

Posted 2023-02-22

【中文标题】将部分数据工具提示文本设置为粗体

【英文标题】：Style the part of data-tooltip text into bold

【发布时间】：2016-08-10 18:27:25

【问题描述】：

data-tooltip="
                 Title Here
                 1. Bullet one 
                 2. Bullet two
                 3. Bullet three "

我需要将“此处的标题”加粗，其余部分在新行中对齐。

【问题讨论】：

你如何显示工具提示？一些插件或通过 CSS ？贴出相关代码

我认为这与 Bootstrap 工具提示有关？

@GabyakaG.Petrioli ，我正在通过 CSS 展示它

【参考方案1】：

假设您使用的是 Bootstrap 工具提示，这是我可以从您的帖子中推断出的最好的工具提示，您可以在工具提示中启用 html。 （请记住在未来提供更多细节！）

<div data-tooltip="<strong>Title Here</strong>
                     <ol>
                       <li>Bullet one</li>
                       <li>Bullet two</li>
                       <li>Bullet three</li>
                     </ol>" data-html="true">

此外，如果可能，我建议将 HTML 属性保留在一行中，既是为了约定，又是为了防止任何无意的换行等。如果您在工具提示中需要换行符，请使用 <br> 元素。

(function () 
  $('[data-toggle="tooltip"]').tooltip();
());

.tooltip-div 
  background-color: #F00;
  width: 100px;
  height: 100px;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>


<div class="tooltip-div" data-toggle="tooltip" title="<strong>Title Here</strong><ol><li>Bullet one</li><li>Bullet two</li><li>Bullet three</li></ol>" data-html="true" data-placement="bottom">
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>

【讨论】：

你打败了我，这是我正在做的演示：bootply.com/XpJcxYPsHN

看起来你几乎击败了 me ;) 据我所知，你已经接近完成 :) 演示也不错。

如何使用原生 CSS/JS 做到这一点？

如果你正在寻找一个普通的 JS 库，有 Tippy：atomiks.github.io/tippyjs 否则，你可以查看这样的答案：***.com/questions/18359193/plain-javascript-tooltip***.com/questions/7117073/…