ツールチップ

カテゴリー：ボタン

html

<button class="btn cap" data-tippy-content="<div class='inner-cap'>

<p>続きは会員登録をしたら読むことができます。</p>

<p>ツールチップにはHTMLも使えます。</p></div>">

ボタン

</button>

CSS

/*========= レイアウトのためのCSS ===============*/
.btn {
	display:block;
	outline: none;
	background:#333;
	color: #fff;
	border-radius: 10px;
	padding: 10px 50px;
	margin: 0 auto;
}

.btn:hover {
	background: #056AA9;
}

span {
	background: linear-gradient(transparent 60%, #ffff66 60%);
	cursor: pointer;
}

a {
	color:#333;
}

a:hover {
	text-decoration: none;
}

tippy('.cap', {
	//指定した要素にツールチップが出現
	placement: 'top-start',
	
	//ツールチップの表示位置⇒top、top-start、top-end、right、right-start、right-end、bottom、bottom-start、bottom-end、left、left-start、left-end。指定をしなくてもtopに表示

	animation: 'shift-toward-subtle',
	//ツールチップ出現の動き。動きを指定するにはhttps://unpkg.com/browse/tippy.js@5.0.3/animations/から任意の動きを選び<head>内に読み込むことが必要。使用できる動き⇒shift-away、shift-away-subtle、shift-away-extreme、shift-toward、shift-toward-subtle、shift-toward-extreme、scale、scale-subtle、scale-extreme、perspective、perspective-subtle、perspective-extreme。指定をしなくてもfadeで表示

	theme: 'light-border',
	//ツールチップのテーマの色。色を指定するにはhttps://unpkg.com/browse/tippy.js@5.0.3/themes/からテーマを選び<head>内に読み込んで指定する。テーマの種類⇒light、light-border、material、translucent。指定をしなくても黒色で表示

	duration: 200,
	//ツールチップの出現の速さをミリ秒単位で指定
}
)

引用元：https://coco-factory.jp/ugokuweb/move01/9-3-1/

投稿日：2022年04月05日

CSS

ツールチップ

アーカイブ