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>