m-shinkawa
7/3/2018 - 5:17 PM

bootstrap-cc-05-tooltip

bootstrap-cc-05-tooltip

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
$('[data-toggle=tooltip]').tooltip();
<h1>ツールチップ</h1>
<div class="text-center">
    <button type="button" class="btn btn-info" data-toggle="tooltip" data-placement="right" title="右に表示">Right</button>
    <button type="button" class="btn btn-info" data-toggle="tooltip" data-placement="left" title="左に表示">Left</button>
    <button type="button" class="btn btn-info" data-toggle="tooltip" data-placement="top" title="上に表示">Top</button>
    <button type="button" class="btn btn-info" data-toggle="tooltip" data-placement="bottom" title="下に表示">Bottom</button>
</div>

<h4>ツールチップの表示時間を遅らせる</h4>
<button type="button" class="btn btn-info" data-toggle="tooltip" data-placement="top" data-delay='{ "show": 500, "hide": 0 }' title="上に表示">Top</button>