ツールチップ 【ツールチップ】Bootstrap4のツールチップとポップオーバー
Bootstrap4のポップオーバーとツールチップのサンプルです。 どちらもオプションが豊富で様々な表示や動作の設定が可能です。
2019-10
ツールチップ 
マウスオーバー 【マウスオーバー】画像の縦スクロール表示
縦長の画像をマウスオーバーすると表示していない部分を縦スクロールで表示します。マウスアウトで画像の一番上に戻ります。
マウスオーバー 【マウスオーバー】画像をマウスオーバーでメニューを表示
画像をマウスオーバーすると画像の中央から飛び出すようにメニューが表示されます。スマホ表示では単純なリンクの画像にします。htmlとCSSのみで実装します。
フォーム 【フォーム】選択したチェックボックスのテキストを表示
選択肢のチェックボックスにチェックを入れると、その選択肢のテキストがページ上部に表示されます。選択肢が多数ある場合、何を選択したかわかりやすくなります。
フェーダー 【フェーダー】スライダーを使わずにjQueryでスライドショーを実装
画像のスライドショーはスライダーを使うのが一般的ですが、スライダーを使わずに自作のjQueryで実装します。
フェーダー 【フェーダー】タイプライター風にテキストを表示
ページ表示時にタイプライター風にテキストを表示します。カーソルの点滅動作はCSSで実装します。
ツールチップ 【ツールチップ】プラグインでツールチップ表示【popper.js・tooltip.js】
プラグインのpopper.jsとtooltip.jsを利用してツールチップを表示します。オプションを設定することで表示位置のカスタマイズが可能です。またクリック表示にも対応しています。
カレンダー 【カレンダー】FullCalendarのイベントをマウスオーバーでツールチップを表示
FullCalendarでイベントをマウスオーバーすると、イベントごとに設定した詳細がツールチップで表示されます。ツールチップはBootstrap 4を利用します。
カレンダー 【カレンダー】プラグインでカレンダー表示【fullcalendar.js】
プラグインのfullcalendar.jsを利用してカレンダーを表示します。バージョンはv3.10.0です。祝日の背景色表示、イベントの色変更、イベントの開始日時と終了日時表示を設定しています。
マウスオーバー 【マウスオーバー】サムネイル画像のマウスオーバーでメイン画像を表示【表示領域サイズ固定の場合】
サムネイル画像をマウスオーバーするとメイン画像が表示されます。同様にキャプションのテキストも差し代わります。メイン画像の表示領域をサイズ固定で正方形にした場合の対応です。