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;
}
JS
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,
//ツールチップの出現の速さをミリ秒単位で指定
}
)
html
<div class="openbtn1"><span></span><span></span><span></span></div>
CSS
/*==================================================
5-2-1 3本線が×に
===================================*/
/*ボタン外側※レイアウトによってpositionや形状は適宜変更してください*/
.openbtn1 {
position: relative;/*ボタン内側の基点となるためrelativeを指定*/
background:#57a2c7;
cursor: pointer;
width: 50px;
height:50px;
border-radius: 5px;
}
/*ボタン内側*/
.openbtn1 span {
display: inline-block;
transition: all .4s;/*アニメーションの設定*/
position: absolute;
left: 14px;
height: 3px;
border-radius: 2px;
background: #fff;
width: 45%;
}
.openbtn1 span:nth-of-type(1) {
top:15px;
}
.openbtn1 span:nth-of-type(2) {
top:23px;
}
.openbtn1 span:nth-of-type(3) {
top:31px;
}
/*activeクラスが付与されると線が回転して×に*/
.openbtn1.active span:nth-of-type(1) {
top: 18px;
left: 18px;
transform: translateY(6px) rotate(-45deg);
width: 30%;
}
/*真ん中の線は透過*/
.openbtn1.active span:nth-of-type(2) {
opacity: 0;
}
.openbtn1.active span:nth-of-type(3) {
top: 30px;
left: 18px;
transform: translateY(-6px) rotate(45deg);
width: 30%;
}
/*========= レイアウトのためのCSS ===============*/
body {
background:#f3f3f3;
padding:20px;
}
a {
color: #333;
text-decoration: none;
}
.lead {
margin:20px 0 0 0;
}
.btn-block {
width:200px;
padding: 30px;
}
JS
$(".openbtn1").click(function () {
$(this).toggleClass('active');
});