JSFiddle - React, Tailwind, and code Playground
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.7/js/bootstrap.min.js"></script>
<button id="btnTarget" class="btn btn-info" data-toggle="tooltip">サブミットボタン</button>
CSS
body {
margin:50px;
}
JavaScript
$('#btnTarget')
// Tooltipの設定
.tooltip({
title: 'クリックされました!',
placement: 'right',
trigger: 'manual'
})
// Tooltip表示後の動作を設定
.on('shown.bs.tooltip', function(){
setTimeout((function(){
$(this).tooltip('hide');
}).bind(this), 2000);
})
// クリック時の動作を設定
.on('click', function() {
$(this).tooltip('show'); // Tooltipを表示する
});