JavaScript和多个工具提示

Question

This script function below only seems to work if one instance for the tool tip is available. I am not receiving any console errors either. Any idea what the issue could be?

Using 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>

Answer 1

Working demo using selector option

 $('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> 

Answer 2

Use html inside title attribute like this :

 $(".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>