【ツールチップ】Bootstrap4のツールチップとポップオーバー

Bootstrap4のツールチップとポップオーバーのサンプルです。 どちらもオプションが豊富で様々な表示や動作の設定が可能です。

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'
	});
});
タイトルとURLをコピーしました