JavaScript和多个工具提示

Question

以下脚本功能似乎只有在工具提示的一个实例可用时才起作用。我也没有收到任何控制台错误。您有什么想法吗？

使用 Bootstrap 4

<!-- Tooltip link 1 -->
<p><span class="tip" data-tip="my-tip1">Load Tip 1</span></p>

<!-- Tooltip link 2 -->
<p><span class="tip" data-tip="my-tip2">Load tip 2</span></p>

<!-- Tooltip content 1 -->
<div id="my-tip1" class="tip-content hidden">
    <h2>Content Number One</h2>
    <p>This is my tip content One</p>
</div>

<!-- Tooltip content 2 -->
<div id="my-tip2" class="tip-content hidden">
    <h2>Content number Two</h2>
    <p>This is my tip content Two </p>
</div>

JavaScript:

<script type="text/javascript">
    $(document).ready(function () {
        // Tooltips
        $('.tip').each(function () {
            $(this).tooltip(
            {
                html: true,
                title: $('#' + $(this).data('tip')).html()
            });
        });
    });
</script>

- acctman

---

1. 你正在使用哪个工具提示库？
2. 你能否使用 Stack Snippets（这里是如何使用的）更新你的问题，提供一个 [mcve] 来复制问题？
3. 当有多个工具提示时，它出现了什么问题？

- T.J. Crowder

你使用的是哪个版本的Bootstrap？在没有“hidden”类的Bootstrap4中，它可以正常工作。 - User863

@User863 Bootstrap 4 - acctman

Answer 1

使用selector选项的工作演示

$('body').tooltip({
  selector: '.tip',
  html: true,
  placement: 'auto',
  title: function() {
    return $('#' + $(this).data('tip')).html()
  }
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

<!-- Tooltip link 1 -->
<p><span class="tip" data-tip="my-tip1">Load Tip 1</span></p>

<!-- Tooltip link 2 -->
<p><span class="tip" data-tip="my-tip2">Load tip 2</span></p>

<!-- Tooltip content 1 -->
<div id="my-tip1" class="tip-content d-none">
  <h2>Content Number One</h2>
  <p>This is my tip content One</p>
</div>

<!-- Tooltip content 2 -->
<div id="my-tip2" class="tip-content d-none">
  <h2>Content number Two</h2>
  <p>This is my tip content Two </p>
</div>

- User863

---

有没有适用于这个问题的Bootstrap 4解决方案？ - acctman

@acctman 对于 Bootstrap 4 同样适用，除了 hidden 类之外。相反，您可以使用 d-none。 - User863

Answer 2

在title属性中使用HTML，如下所示：

像这样：

$(".tip").tooltip();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- Tooltip link 1 -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>



<!-- Tooltip link 1 -->
<p><span class="tip" data-toggle="tooltip" data-html="true" data-placement="right" title=" <h2>Content Number One</h2>
    <p>This is my tip content One</p>">Load Tip 1</span></p>
    
<!-- Tooltip link 2 -->
<p><span class="tip" data-toggle="tooltip" data-html="true" data-placement="right" title="  <h2>Content number Two</h2>
    <p>This is my tip content Two </p>">Load Tip 2</span></p>

- becher henchiri