We Blog Weblog

ツールチップ

Web

2023年8月15日

みなさんこんにちは。
ケミストのWeb担当みやのです。

「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。

今回は「ツールチップ」について書きます。

・ツールチップとは

・ダークモードに対応

・アニメーションさせよう

・ふわっとスライド

・くるっと回転

・まとめ

ツールチップとは

参考：Bootstrap4.3日本語リファレンス｜Tooltips

参考：Bootstrap4移行ガイド｜ツールチップのサンプル

マウスカーソルを乗せると出てくる小さな吹き出しのことを「ツールチップ」というらしいです。

メリット：デザインを邪魔しない

デメリット：気づかれにくい、長い文章には向かない

では早速実装してみましょう。

まずはスクリプトを記述するのですが、順番も大事みたいです。

jQuery→popper.js→bootstrap.jsの順で読み込んで、最後にツールチップを実行するスクリプトを記述します。

popper.jsとはツールチップやドロップダウンといったポップアップ要素の表示位置をいい感じにしてくれるライブラリだそうです。

<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
                        
<script>
  $('[data-toggle="tooltip"]').tooltip();
</script>

ボタンを設置し、data-toggle="tooltip"として、title属性にツールチップの中身を記述します。

<button type="button" data-toggle="tooltip" title="ツールチップ">ボタン</button>

 

 

data-placement属性でツールチップの表示位置を指定することができます。

画面からはみ出る場合には、画面内に収まるように自動的に調整してくれるようです。

<button type="button" data-toggle="tooltip" data-placement="top" title="ツールチップ上">上</button>

<button type="button" data-toggle="tooltip" data-placement="left" title="ツールチップ左">左</button>

<button type="button" data-toggle="tooltip" data-placement="right" title="ツールチップ右">右</button>

<button type="button" data-toggle="tooltip" data-placement="bottom" title="ツールチップ下">下</button>

 

 

テキストやFont Awesomeに仕込むこともできます。

<p><span data-toggle="tooltip" title="ツールチップ">ここ</span>にマウスホバー</p>

 

ここにホバー

 

<i class="fas fa-info-circle" data-toggle="tooltip" title="ツールチップ"></i>

 

 

data-trigger="click"とすると、ボタンを押すことでツールチップを表示・非表示させることができます。

<button type="button" data-toggle="tooltip" data-trigger="click" title="ツールチップ">ボタン</button>

 

 

data-trigger="focus"で、inputにフォーカスしたらツールチップが出てきます。

<input type="text" data-toggle="tooltip" data-trigger="focus" title="ツールチップ">

 

 

data-trigger="manual"を使って、ボタンとは別の場所にツールチップを出せます。

スクリプトにちょっと付け足します。

<button type="button" id="btnToggleTip">ボタン</button>

<span data-toggle="tooltip" data-trigger="manual" title="ツールチップ" id="tip1">ここ</span>に出ます
$('[data-toggle="tooltip"]').tooltip();

$('#btnToggleTip').on('click',function(){
  $('#tip1').tooltip('toggle');
})

 

ここに出ます

 

ダークモードに対応

せっかくなのでダークモードに対応させましょう（もうしてるけど）

bootstrap.cssの中からツールチップの色に関する部分を探します。

.bs-tooltip-top .arrow::before,
.bs-tooltip-auto[x-placement^="top"] .arrow::before {
  top: 0;
  border-width: 0.4rem 0.4rem 0;
  border-top-color: #000;
}

.bs-tooltip-right .arrow::before,
.bs-tooltip-auto[x-placement^="right"] .arrow::before {
  right: 0;
  border-width: 0.4rem 0.4rem 0.4rem 0;
  border-right-color: #000;
}

.bs-tooltip-bottom .arrow::before,
.bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
  bottom: 0;
  border-width: 0 0.4rem 0.4rem;
  border-bottom-color: #000;
}

.bs-tooltip-left .arrow::before,
.bs-tooltip-auto[x-placement^="left"] .arrow::before {
  left: 0;
  border-width: 0.4rem 0 0.4rem 0.4rem;
  border-left-color: #000;
}

.tooltip-inner {
  max-width: 200px;
  padding: 0.25rem 0.5rem;
  color: #fff;
  text-align: center;
  background-color: #000;
  border-radius: 0.25rem;
}

これらをコピーして、それぞれのクラスの先頭に.dark-themeを追加して、背景色を#fff、文字の色を#333にします。

.dark-theme .bs-tooltip-top .arrow::before,
.dark-theme .bs-tooltip-auto[x-placement^="top"] .arrow::before {
  top: 0;
  border-width: 0.4rem 0.4rem 0;
  border-top-color: #fff;
}


.dark-theme .bs-tooltip-right .arrow::before,
.dark-theme .bs-tooltip-auto[x-placement^="right"] .arrow::before {
  right: 0;
  border-width: 0.4rem 0.4rem 0.4rem 0;
  border-right-color: #fff;
}

.dark-theme .bs-tooltip-bottom .arrow::before,
.dark-theme .bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
  bottom: 0;
  border-width: 0 0.4rem 0.4rem;
  border-bottom-color: #fff;
}

.dark-theme .bs-tooltip-left .arrow::before,
.dark-theme .bs-tooltip-auto[x-placement^="left"] .arrow::before {
  left: 0;
  border-width: 0.4rem 0 0.4rem 0.4rem;
  border-left-color: #fff;
}

.dark-theme .tooltip-inner {
  max-width: 200px;
  padding: 0.25rem 0.5rem;
  color: #333;
  text-align: center;
  background-color: #fff;
  border-radius: 0.25rem;
}

 

アニメーションさせよう

Bootstrapのtooltipをアニメーションできないかいろいろ試してみたのですが、上手くいきませんでした。

別の方法で実装してみます。

① ふわっとスライド

参考：KodoCode｜ツールチップ(tooltip)をおしゃれにするCSSスニペット9選。バルーンだけじゃない！

1番目のやつを真似してみました。

[tooltip] {
  position: relative;
}

[tooltip]::before,
[tooltip]::after {
  text-transform: none;
  font-size: .9em;
  line-height: 1;
  user-select: none;
  pointer-events: none;
  position: absolute;
  display: none;
  opacity: 0;
}

[tooltip]::before {
  content: '';
  border: 5px solid transparent;
  z-index: 1001;
}

[tooltip]::after {
  content: attr(tooltip);
  text-align: center;
  min-width: 3em;
  max-width: 21em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 1ch 1.5ch;
  border-radius: .3ch;
  box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35);
  color: #fff;
  z-index: 1000;
}

[tooltip]:hover::before,
[tooltip]:hover::after {
  display: block;
}

[tooltip='']::before,
[tooltip='']::after {
  display: none !important;
}

[tooltip]:not([flow])::before,
[tooltip][flow^="up"]::before {
  bottom: 100%;
  border-bottom-width: 0;
  border-top-color: #007bff;
}

[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::after {
  bottom: calc(100% + 5px);
  background: #007bff;
}

[tooltip]:not([flow])::before,
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::before,
[tooltip][flow^="up"]::after {
  left: 50%;
  transform: translate(-50%, -.5em);
}

[tooltip][flow^="down"]::before {
  top: 100%;
  border-top-width: 0;
  border-bottom-color: #ffc107;
}

[tooltip][flow^="down"]::after {
  top: calc(100% + 5px);
  background:#ffc107;
}

[tooltip][flow^="down"]::before,
[tooltip][flow^="down"]::after {
  left: 50%;
  transform: translate(-50%, .5em);
}

[tooltip][flow^="left"]::before {
  top: 50%;
  border-right-width: 0;
  border-left-color: #28a745;
  left: calc(0em - 5px);
  transform: translate(-.5em, -50%);
}

[tooltip][flow^="left"]::after {
  top: 50%;
  right: calc(100% + 5px);
  transform: translate(-.5em, -50%);
  background:#28a745;
}

[tooltip][flow^="right"]::before {
  top: 50%;
  border-left-width: 0;
  border-right-color: #dc3545;
  right: calc(0em - 5px);
  transform: translate(.5em, -50%);
}

[tooltip][flow^="right"]::after {
  top: 50%;
  left: calc(100% + 5px);
  transform: translate(.5em, -50%);
  background:#dc3545;
}

@keyframes tooltips-vert {
  to {
    opacity: .9;
    transform: translate(-50%, 0);
  }
}

@keyframes tooltips-horz {
  to {
    opacity: .9;
    transform: translate(0, -50%);
  }
}

[tooltip]:not([flow]):hover::before,
[tooltip]:not([flow]):hover::after,
[tooltip][flow^="up"]:hover::before,
[tooltip][flow^="up"]:hover::after,
[tooltip][flow^="down"]:hover::before,
[tooltip][flow^="down"]:hover::after {
  animation: tooltips-vert 300ms ease-out forwards;
}

[tooltip][flow^="left"]:hover::before,
[tooltip][flow^="left"]:hover::after,
[tooltip][flow^="right"]:hover::before,
[tooltip][flow^="right"]:hover::after {
  animation: tooltips-horz 300ms ease-out forwards;
}
<button type="button" tooltip="上からふわっと">上</button>

<button type="button" tooltip="左からふわっと" flow="left">左</button>

<button type="button" tooltip="右からふわっと" flow="right">右</button>

<button type="button" tooltip="下からふわっと" flow="down">下</button>

 

 

CSSだけで実装できて、スクリプトはいらないみたいですね。もう全部これでいいじゃん

ただし、画面からはみ出る場合でも位置の調整はしてくれないようです。

② くるっと回転

参考：bbbootstrap.com｜Bootstrap 4 simple animated tooltip Example

.mytooltip {
	display: inline;
	position: relative;
	z-index: 999
}

.mytooltip .tooltip-item {
  background: transparent;
	cursor: pointer;
  text-decoration: underline;
	display: inline-block;
	padding: 0 10px
}

.mytooltip .tooltip-content {
	position: absolute;
	z-index: 9999;
	width: 360px;
	left: 50%;
	margin: 0 0 20px -180px;
	bottom: 100%;
	text-align: left;
	font-size: 14px;
	line-height: 30px;
	-webkit-box-shadow: -5px -5px 15px rgba(48, 54, 61, 0.2);
	box-shadow: -5px -5px 15px rgba(48, 54, 61, 0.2);
	background: #2b2b2b;
	opacity: 0;
	cursor: default;
	pointer-events: none
}

.mytooltip .tooltip-content::after {
	content: '';
	top: 100%;
	left: 50%;
	border: solid transparent;
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: #2a3035 transparent transparent;
	border-width: 10px;
	margin-left: -10px
}

.mytooltip:hover .tooltip-item::after {
	pointer-events: auto
}

.mytooltip:hover .tooltip-content {
	pointer-events: auto;
	opacity: 1;
	-webkit-transform: translate3d(0, 0, 0) rotate3d(0, 0, 0, 0deg);
	transform: translate3d(0, 0, 0) rotate3d(0, 0, 0, 0deg)
}

.mytooltip .tooltip-text {
	font-size: 14px;
	line-height: 24px;
	display: block;
	padding: 1.31em 1.21em 1.21em 0;
	color: #fff
}

.tooltip-effect-5 .tooltip-text {
	padding: 1.4em
}

.tooltip-effect-5 .tooltip-content {
	width: 180px;
	margin-left: -90px;
	-webkit-transform-origin: 50% calc(106%);
	transform-origin: 50% calc(106%);
	-webkit-transform: rotate3d(0, 0, 1, 15deg);
	transform: rotate3d(0, 0, 1, 15deg);
	-webkit-transition: opacity 0.2s, -webkit-transform 0.2s;
	transition: opacity 0.2s, -webkit-transform 0.2s;
	transition: opacity 0.2s, transform 0.2s;
	transition: opacity 0.2s, transform 0.2s, -webkit-transform 0.2s;
	-webkit-transition-timing-function: ease, cubic-bezier(0.17, 0.67, 0.4, 1.39);
	transition-timing-function: ease, cubic-bezier(0.17, 0.67, 0.4, 1.39)
}
<p>
  <span class="mytooltip tooltip-effect-5">
    <span class="tooltip-item">ここ</span>
    <span class="tooltip-content clearfix">
      <span class="tooltip-text">ツールチップ</span>
    </span>
  </span>
にホバー</p>

 

 

ここ ツールチップ にホバー

 

まとめ

ツールとかチップとか聞くと、サガフ〇ンティアⅡを思い出してしまいます。

人間なのよ、ギュスターヴ！！

お問い合わせフォームとかメニューにツールチップを取り入れていきたいです。時間があれば。

この記事を書いた人
みやの
Web・DTP担当

Contact Us

ご意見、ご相談、料金のお見積もりなど、お気軽にお問い合わせください。

お問い合わせはこちら

TOP