JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div  style="margin:40px;" class="not-editable">
    <span>Click here</span>
</div>

JavaScript

$('body').tooltip({
    selector: '.not-editable .to-edit',
    placement: 'bottom',
    trigger: 'click | hover',
    title: 'Actual times cannot be given as the trip is not confirmed',
    template: '<div class="tooltip error-tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

});


setTimeout(function(){
	$('.not-editable').find('span').addClass('to-edit');
}, 1000);


$(document).on('click', '.to-edit', function(){
    console.log("showing...");
    $(this).tooltip('show');
});