Bootstrap4のツールチップとポップオーバーのサンプルです。 どちらもオプションが豊富で様々な表示や動作の設定が可能です。
北海道【ツールチップ】
東北【ポップオーバー】
関東【ポップオーバー】trigger: ‘hover’
甲信越【ポップオーバー】html: true
北陸【ポップオーバー】toggleメソッドでテキストリンクに表示
東海【ツールチップ】trigger: ‘manual’で常に表示
近畿【ポップオーバー】trigger: ‘manual’で常に表示
中国【ポップオーバー】offsetで30%右へずらす
四国【ツールチップ】offsetで5px下へずらす
九州【ポップオーバー】hideメソッドで他のポップオーバーを閉じる
沖縄【ポップオーバー】title設定なし
htmlのコードは下記になります。
パターンを試すため、aタグにidを付与しています。またカスタムデータ属性で、ポップオーバーにはdata-toggle=”popover”、ツールチップにはdata-toggle=”tooltip”を付与しています。
<p>
<a href="#" class="btn btn-secondary mb-3" id="demo01" data-toggle="tooltip">北海道【ツールチップ】</a><br>
<a href="#" class="btn btn-secondary mb-3" id="demo02" data-toggle="popover">東北【ポップオーバー】</a><br>
<a href="#" class="btn btn-secondary mb-3" id="demo03" data-toggle="popover">関東【ポップオーバー】trigger: 'hover'</a><br>
<a href="#" class="btn btn-secondary mb-3" id="demo04" data-toggle="popover">甲信越【ポップオーバー】html: true</a><br>
<a href="#" class="btn btn-secondary mb-3" id="demo05" data-toggle="popover">北陸【ポップオーバー】toggleメソッドでテキストリンクに表示</a><br>
<a href="#" class="btn btn-secondary mb-3" id="demo06" data-toggle="tooltip" title="東海:長野県、山梨県、静岡県、愛知県、岐阜県、三重県" data-trigger="manual" data-placement="left">東海【ツールチップ】trigger: 'manual'で常に表示</a><br>
<a href="#" class="btn btn-secondary mb-3" id="demo07" data-toggle="popover" title="近畿" data-content="滋賀県、奈良県、京都府、大阪府、和歌山県、兵庫県" data-trigger="manual" data-placement="right">近畿【ポップオーバー】trigger: 'manual'で常に表示</a><br>
<a href="#" class="btn btn-secondary mb-3" id="demo08" data-toggle="popover">中国【ポップオーバー】offsetで30%右へずらす</a><br>
<a href="#" class="btn btn-secondary mb-3" id="demo09" data-toggle="tooltip">四国【ツールチップ】offsetで5px下へずらす</a><br>
<a href="#" class="btn btn-secondary mb-3" id="demo10" data-toggle="popover">九州【ポップオーバー】hideメソッドで他のポップオーバーを閉じる</a><br>
<a href="#" class="btn btn-secondary" id="demo11" data-toggle="popover">沖縄【ポップオーバー】title設定なし</a>
</p>
<p><a href="#" id="demo05_txt" data-toggle="popover">北陸【ポップオーバー】の表示</a></p>
続いてCSSのコードです。
id=”demo04″を付与したポップオーバーのaタグは、オプションでhtmlの記述を有効にしています。content部分にspanタグを挿入していますが、そのspanタグに付与したクラス名popover_demo04のCSSを記述しています。
.popover_demo04 {
font-size: 1.5em;
font-weight: bold;
color: green;
}
最後にjQueryのコードです。
ポップオーバーのデフォルトのtriggerはclickですが、hoverにするとツールチップのような動作になります。またtitleを省略してcontentのみ設定すると表示もツールチップのようになります。また、ツールチップ、ポップオーバー共にtriggerをmanualに設定してshowメソッドを利用すると、常時表示することが可能です。
$(function() {
$('#demo01').tooltip({
title: '北海道',
placement: 'top'
});
$('#demo02').popover({
title: '東北',
content: '青森県、岩手県、宮城県、秋田県、山形県、福島県',
placement: 'right'
});
$('#demo03').popover({
title: '関東',
content: '茨城県、栃木県、群馬県、埼玉県、千葉県、東京都、神奈川県',
placement: 'top',
trigger: 'hover'
});
$('#demo04').popover({
title: '甲信越',
content: '<span class="popover_demo04">山梨県、長野県、新潟県</span>',
placement: 'top',
html: true
});
$('#demo05').on('click',function(){
$('#demo05_txt').popover('toggle');
});
$('#demo05_txt').popover({
title: '北陸',
content: '富山県、石川県、福井県',
placement: 'top'
});
$('#demo06').tooltip('show');
$('#demo07').popover('show');
$('#demo08').popover({
title: '中国',
content: '鳥取県、島根県、岡山県、広島県、山口県',
placement: 'top',
offset: '30%'
});
$('#demo09').tooltip({
title: '四国:徳島県、香川県、愛媛県、高知県',
placement: 'right',
offset: '5'
});
$('#demo10').popover({
title: '九州',
content: '福岡県、佐賀県、長崎県、熊本県、大分県、宮崎県、鹿児島県',
placement: 'right'
});
$('#demo10').on('click', function() {
$('[data-toggle=popover]').not(this).popover('hide');
});
$('#demo11').popover({
content: '沖縄県',
placement: 'bottom'
});
});