jquery - 语义 UI "no javascript"工具提示 : Can we put part of the text in bold?

Question

我正在使用“无 javascript”工具提示(参见此处的“工具提示”:https://semantic-ui.com/modules/popup.html#tooltip)。

将部分文本加粗的最快方法是什么？

我试过了，但是没用:

<div class="ui button" data-tooltip="Add users to your <strong>feed</strong>" data-position="top left">
  Top Left
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.css" integrity="sha256-/Z28yXtfBv/6/alw+yZuODgTbKZm86IKbPE/5kjO/xY=" crossorigin="anonymous" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.js" integrity="sha256-Bhi6GMQ/72uYZcJXCJ2LToOIcN3+Cx47AZnq/Bw1f7A=" crossorigin="anonymous"></script>

<span>
<div class="ui button" data-tooltip="Add users to your <strong>feed</strong>" data-position="bottom left">
      Bottom Left
    </div> </span>

Answer 1

看看https://semantic-ui.com/modules/popup.html#tooltip在 Flow 下，您可以使用它来提供相同的外观，但不同的方法可能适合您。

我相信工具提示会将其呈现为纯文本并且不允许 html 值。

希望这对您有所帮助，您可以根据需要调整它并删除不需要的列并应用其他样式等。

<div class="ui button">Show flowing popup</div>
<div class="ui flowing popup top left transition hidden">
  <div class="ui three column divided center aligned grid">
    <div class="column">
      <h4 class="ui header">Basic Plan</h4>
      <p><b>2</b> projects, $10 a month</p>
      <div class="ui button">Choose</div>
    </div>
    <div class="column">
      <h4 class="ui header">Business Plan</h4>
      <p><b>5</b> projects, $20 a month</p>
      <div class="ui button">Choose</div>
    </div>
    <div class="column">
      <h4 class="ui header">Premium Plan</h4>
      <p><b>8</b> projects, $25 a month</p>
      <div class="ui button">Choose</div>
    </div>
  </div>
</div>