Bootstrap 3 Tooltips with Html content

by Intesar Haider

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="">
  <div class="row">    
	<div class="col-sm-12">
    	<a href="#" data-toggle="tooltip" data-container="body" data-original-title="
      <aside>
        <h2>Bookfull</h2>
        <p><b>Name:</b>Intesar Haider Khan</p>
        <p><b>Phone:</b>+918510860215 dsdsdsd</p>
        <p><b>In:</b>02-05-2019</p>
        <p><b>Out:</b>02-05-2019</p>
        <p><b>Balance:</b>$520</p>
      </aside>
      <aside>
        <h2>AirBnb</h2>
        <p><b>Name:</b>Intesar Haider Khan</p>
        <p><b>Phone:</b>+918510860215</p>
        <p><b>In:</b>02-05-2019</p>
        <p><b>Out:</b>02-05-2019</p>
        <p><b>Balance:</b>$520</p>
      </aside>
      ">Hover to see my tooltip</a>
    </div>
	 
	 
	 
  </div>
</div>

CSS

body{
  padding: 40% 20% 20% 20%;
  text-align: center;
  height: 100vh;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: #ccc;
}

JavaScript

/* ================================================
 * bootstrap-tooltip-custom-class.js v0.0.1
 *
 * Extend Bootstrap 3 Tooltip plugin by adding custom classes.
 * Custom classes can be added by using `customClass` paramater or via `data-custom-class` attribute.
 * There are 5 predefined custom classes in CSS: .tooltip-primary, .tooltip-success, .tooltip-info, .tooltip-warning, .tooltip-danger. 
 * ============================================= */

(function ($) {
  
  if (typeof $.fn.tooltip.Constructor === 'undefined') {
    throw new Error('Bootstrap Tooltip must be included first!');
  }
  
  var Tooltip = $.fn.tooltip.Constructor;
    
  $.extend( Tooltip.DEFAULTS, {
    customClass: ''
  });
    
  var _show = Tooltip.prototype.show;
  
  Tooltip.prototype.show = function () {
    
    _show.apply(this,Array.prototype.slice.apply(arguments));
    
    if ( this.options.customClass ) {
        var $tip = this.tip();
        $tip.addClass(this.options.customClass);
    }

  };
  
})(window.jQuery);

/** **/
$(document).ready(function(){

$('[data-toggle=tooltip]').tooltip({
    customClass: 'tooltip-custom',
    html:true,
  });
   
});