JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div id="myTooltip"></div>
<div id="myTooltip2"></div>

<button id="bootstrapTooltip" type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>

JavaScript

var bootstrapTooltip = $.fn.tooltip.noConflict();
$.fn.bootstrapTooltip = bootstrapTooltip;

$(function () {
    $.widget("my.tooltip", {
        _create: function () {
            this.element.text('my tooltip!');
        }
    });
}(jQuery));

$(document).ready(function() {
    $.widget.bridge( "my_tooltip", $.my.tooltip );
    
    $('#myTooltip').my_tooltip({});
    $.my.tooltip(null, $('#myTooltip2'));

    $('#bootstrapTooltip').bootstrapTooltip();
});