
HTML・CSSでつくるツールチップのデザイン4選
HTML・CSSでつくるツールチップのデザインをまとめました。クリックで非表示を切り替えるものや吹き出し風・アニメーション付きのものまで、どれもコピペで再現することが可能です。
上向きのツールチップ
step1
デザインを調整する
マウスホバーしてください
ツールチップの内容
step2
HTMLをコピペする
HTML
<div class="tooltip-001">
<div>マウスホバーしてください</div>
<span>ツールチップの内容</span>
</div>
step3
CSSをコピペする
CSS
.tooltip-001 {
display: inline-block;
position: relative;
}
.tooltip-001 > div {
cursor: pointer;
}
.tooltip-001 > span {
display: flex;
justify-content: center;
visibility: hidden;
opacity: 0;
position: absolute;
bottom: -40px;
left: 50%;
transform: translateX(-50%);
padding: 5px 10px;
border-radius: 3px;
background-color: #2589d0;
color: #ffffff;
font-size: .8em;
white-space: nowrap;
transition: opacity .3s;
}
.tooltip-001 > span::before {
position: absolute;
top: -8px;
width: 12px;
height: 8px;
background-color: inherit;
clip-path: polygon(50% 0, 0 100%, 100% 100%);
content: '';
}
.tooltip-001:hover > span {
visibility: visible;
opacity: 1;
}
下向きのツールチップ
step1
デザインを調整する
マウスホバーしてください
ツールチップの内容
step2
HTMLをコピペする
HTML
<div class="tooltip-002">
<div>マウスホバーしてください</div>
<span>ツールチップの内容</span>
</div>
step3
CSSをコピペする
CSS
.tooltip-002 {
display: inline-block;
position: relative;
}
.tooltip-002 > div {
cursor: pointer;
}
.tooltip-002 > span {
display: flex;
justify-content: center;
visibility: hidden;
opacity: 0;
position: absolute;
top: -40px;
left: 50%;
transform: translateX(-50%);
padding: 5px 10px;
border-radius: 3px;
background-color: #2589d0;
color: #ffffff;
font-size: .8em;
white-space: nowrap;
transition: opacity .3s;
}
.tooltip-002 > span::before {
position: absolute;
bottom: -8px;
width: 12px;
height: 8px;
background-color: inherit;
clip-path: polygon(0 0, 100% 0, 50% 100%);
content: '';
}
.tooltip-002:hover > span {
visibility: visible;
opacity: 1;
}
左向きのツールチップ
step1
デザインを調整する
マウスホバーしてください
ツールチップの内容
step2
HTMLをコピペする
HTML
<div class="tooltip-003">
<div>マウスホバーしてください</div>
<span>ツールチップの内容</span>
</div>
step3
CSSをコピペする
CSS
.tooltip-003 {
display: inline-block;
position: relative;
}
.tooltip-003 > div {
cursor: pointer;
}
.tooltip-003 > span {
display: flex;
align-items: center;
visibility: hidden;
opacity: 0;
position: absolute;
top: 50%;
right: -150px;
transform: translateY(-50%);
padding: 5px 10px;
border-radius: 3px;
background-color: #2589d0;
color: #fff;
font-size: .8em;
white-space: nowrap;
transition: opacity .3s;
}
.tooltip-003 > span::before {
position: absolute;
left: -8px;
width: 8px;
height: 12px;
background-color: inherit;
clip-path: polygon(0 50%, 100% 0, 100% 100%);
content: '';
}
.tooltip-003:hover > span {
visibility: visible;
opacity: 1;
}
右向きのツールチップ
step1
デザインを調整する
マウスホバーしてください
ツールチップの内容
step2
HTMLをコピペする
HTML
<div class="tooltip-004">
<div>マウスホバーしてください</div>
<span>ツールチップの内容</span>
</div>
step3
CSSをコピペする
CSS
.tooltip-004 {
display: inline-block;
position: relative;
}
.tooltip-004 > div {
cursor: pointer;
}
.tooltip-004 > span {
display: flex;
align-items: center;
visibility: hidden;
opacity: 0;
position: absolute;
top: 50%;
left: -150px;
transform: translateY(-50%);
padding: 5px 10px;
border-radius: 3px;
background-color: #2589d0;
color: #fff;
font-size: .8em;
white-space: nowrap;
transition: opacity .3s;
}
.tooltip-004 > span::before {
position: absolute;
right: -8px;
width: 8px;
height: 12px;
background-color: inherit;
clip-path: polygon(0 0, 100% 50%, 0 100%);
content: '';
}
.tooltip-004:hover > span {
visibility: visible;
opacity: 1;
}