JSFiddle - React, Tailwind, and code Playground

by Shashank D

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="text-center">
  <div class="top-wrap"></div>
  <div class="svg-wrap">
    <svg height="100" width="100">
      <circle id="svg-el" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
      Sorry, your browser does not support inline SVG.  
    </svg> 
  </div>

  <button id="test-button" type="button" class="btn btn-default">Tooltip on left</button>
</div>

CSS

.top-wrap {
  background: #eee;
  height: 1400px;
}

JavaScript

$(function(){
	$('#svg-el').tooltip({
		'container': 'body',
		'placement': 'top',
		'html':'true',
		'title': '<strong class="text-uppercase">France</strong><br/> example html content.'
	});
  $('#test-button').tooltip({
		'container': 'body',
		'placement': 'top',
		'title': 'Example tooltip.'
	});
});