Using Bootstrap 3, how do you add html to a tooltip?

Question

I have been having trouble getting HTML into a tooltip using bootstrap 3. I have scoured the internet and tried (seemingly) everything, but it's not working. I will put my code below, but basically what's happening is when I hover over the link, it's generating a tooltip with no HTML, but it's also placing the same text onto the webpage itself. When I leave the hover, the tooltip (with no html) dissappears, but the text on the webpage remains. Can anyone help? My code is below... The version of bootstrap (js and css) I am using is 3.3.7. The version of jquery is 3.1.0

Thanks for the help. Also, I couldn't find "Bootstrap-3" for a tag, so I had to use twitter-bootstrap. Sorry if that causes confusion, but the version of bootstrap I am using is listed in the question (3.3.7).

HTML Code

    <link href="static/css/opendcs.css" rel="stylesheet">
<script src="static/js/jquery-3.1.0.min.js"></script> 
<script src="static/js/blah.js"></script> 
<form method=post enctype=multipart/form-data>
<legend class="legendFooter noBottomMargin noBorders">Upload Rating Table</legend>
<legend></legend>
  <div class="container blah">
    <div class="panel panel-default">
      <input type=file name=file>
    </div>
    <input class="btn btn-info" type=submit value=Upload>

    <a id="additionalInfoToolTip" href="#" data-html="true" data-toggle="tooltip"  data-placement="right" title="Here is a title" target="_blank">Additional Information</a>
  </div>
</form>

blah.js:

$( document ).ready(function() {
    console.log( "Page is ready." );
    //$('#additionalInfoToolTip').tooltip();
    $('#additionalInfoToolTip').tooltip({
        selector: "a[rel=tooltip]"
      });
/*
  $('#additionalInfoToolTip').tooltip({
    selector: "a[rel=tooltip]"
  })

  $('.tooltip-demo.well').tooltip({
  selector: "a[rel=tooltip]"
})
*/
    $(function () {
        /*
      $('[data-toggle="tooltip"]').tooltip({
      })
      */
    })

});

Answer 1

Why not use a complete CSS tooltip

 .wrap{ padding: 100px } .tooltip{ background: #fa0; display: inline-block; color: #fff; position: relative; padding: 5px 10px; border-radius: 20px; } /* Needed css */ .tooltip:hover::before, .tooltip:hover::after { opacity: 1; } .tooltip::after{ content: attr(data-title); /* <= dynamically title content */ z-index: 22; position: absolute; top: -35px; left: -27px; min-width: 60px; padding: 5px 10px; font-size: 70%; text-align: center; color: #fff; background: #000; border-radius: 20px; opacity: 0; } .tooltip::before{ /* For the arrow */ content: ''; width: 10px; height: 10px; background: #111; position: absolute; transform: rotate(45deg); top: -18px; left: 8px; opacity: 0; } 

 <div class="wrap"> <span class="tooltip" data-title="Tool tip text"> Main text </span> <span class="tooltip" data-title="Another Tool tip text"> AnotherMain text </span> </div>