<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" type="text/css" href="https://unpkg.com/tippy.js@5/themes/shift-toward-subtle.css">
<link rel="stylesheet" type="text/css" href="https://unpkg.com/tippy.js@5/themes/light-border.css">
<script src="https://unpkg.com/popper.js@1/dist/umd/popper.min.js">
</script>
<script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.umd.min.js">
</script>
<style>@charset "UTF-8";
/*========= レイアウトのためのCSS ===============*/
body {
width: 100%;
height: 100vh;
vertical-align: middle;
padding: 10px 30px;
/*背景画像設定*/
background: url("/wp-content/uploads/demos/_assets/img_04.jpg") no-repeat
center;
background-size: cover;
}
p.caption {
text-align: center;
margin: 100px 0;
font-size: 1.2rem;
color: #fff;
text-shadow: 1px 1px 2px #333;
}
.inner-cap p {
font-size: 0.8rem;
color: #333;
}
.btn {
display: block;
outline: none;
color: #fff;
width: 200px;
border-radius: 10px;
padding: 10px 50px;
margin: 0 auto;
/*背景の色と形状*/
background: linear-gradient(
270deg,
#3bade3 0%,
#576fe6 25%,
#9844b7 51%,
#ff357f 100%
);
text-shadow: 1px 1px 2px #333;
}
.btn:hover {
transform: scale(0.9);
}
span {
background: linear-gradient(transparent 60%, #ffff66 60%);
cursor: pointer; /*カーソルを指マークに変更*/
}
a {
color: #333;
}
a:hover {
text-decoration: none;
}</style>
</head>
<body>
<body>
<p class="caption">文章が続く中で<span class="cap" data-tippy-content="キャプションが入ります。">この文章にカーソルを合わせると</span>ツールチップが出ます</p>
<button class="btn cap" data-tippy-content="<div class='inner-cap'>
<p>続きは会員登録をしたら読むことができます。</p>
<p>ツールチップにはHTMLも使えます。</p>
</div>">ボタン</button>
<p class="caption">使用したライブラリ：<a href="https://atomiks.github.io/tippyjs/" target="_blank">https://atomiks.github.io/tippyjs</a>
</p>
<script>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: 700 //ツールチップの出現の速さをミリ秒単位で指定
});
//# sourceURL=pen.js</script>
</body>
</html>