CODEWITHSUNDEEP
javascriptjquery
acctman
acctman

Reputation: 4349

JavaScript and multiple tool tips

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>

Upvotes: 3

Views: 645

Answers (2)

User863
User863

Reputation: 20039

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>

Upvotes: 1

becher henchiri
becher henchiri

Reputation: 667

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>

Upvotes: 1

Related Questions