JSFiddle - React, Tailwind, and code Playground

by David_Knowles

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="bs-example tooltip-demo">
    <div class="bs-example-tooltips">
      <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
      <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip on top">Tooltip on top</button>
      <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Tooltip on bottom">Tooltip on bottom</button>
      <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="" data-original-title="Tooltip on right" data-class="dodo">Tooltip on right</button>
    </div>
  </div>

CSS

body {margin: 3em};

JavaScript

// Custom tooltip

$(function () {
    
    !function($){   
        $.extend($.fn.tooltip.Constructor.DEFAULTS,{
            dataClass: false
        }); 
        var Tooltip = $.fn.tooltip.Constructor;
            _show = Tooltip.prototype.show;

        Tooltip.prototype.show = function (){
            _show.apply(this,Array.prototype.slice.apply(arguments));

            if (this.options.dataClass!=="undefined" && this.options.dataClass){
                var that = this;
                var $tip = this.tip();
                if (this.$element.attr("data-class") !== undefined)
                    $tip.addClass(this.$element.attr("data-class"));
            }
        };
        
  $('[data-toggle="tooltip"]').tooltip({
  
  });
})