Result
マウスホバーでツールチップが表示されるよくあるやつ。
吹き出しにSVGが使ってあります。
css
.tooltip:hover {
cursor: help;
}
.tooltip-spacing {
height: 20px;
margin: 8px;
position: relative;
width: 20px;
}
.tooltip-bg1 {
background-color: #000;
border-radius: 10px;
content: " ";
display: flex;
height: 20px;
position: absolute;
top: 0;
width: 20px;
}
.tooltip-bg2 {
background-color: #fff;
border-radius: 8px;
content: " ";
display: flex;
height: 16px;
left: 2px;
position: absolute;
top: 2px;
width: 16px;
}
.tooltip-text {
font-size: 14px;
font-weight: bold;
line-height: 20px;
position: relative;
text-align: center;
width: 20px;
}
.bubble {
clip-path: path(
"M 201.23862,50.748829 A 0.006,0.006 0 0 1 201.23262,50.754829 0.006,0.006 0 0 1 201.22662,50.748829 0.006,0.006 0 0 1 201.23262,50.742829 0.006,0.006 0 0 1 201.23862,50.748829 M 191.85968,17.069946 A 0.006,0.006 0 0 1 191.85368,17.075946 0.006,0.006 0 0 1 191.84768,17.069946 0.006,0.006 0 0 1 191.85368,17.063946 0.006,0.006 0 0 1 191.85968,17.069946 M 161.59133,52.880402 A 0.006,0.006 0 0 1 161.58533,52.886402 0.006,0.006 0 0 1 161.57933,52.880402 0.006,0.006 0 0 1 161.58533,52.874402 0.006,0.006 0 0 1 161.59133,52.880402 M 138.57033,11.101538 A 0.006,0.006 0 0 1 138.56433,11.107538 0.006,0.006 0 0 1 138.55833,11.101538 0.006,0.006 0 0 1 138.56433,11.095538 0.006,0.006 0 0 1 138.57033,11.101538 M 113.84406,50.322514 A 0.006,0.006 0 0 1 113.83806,50.328514 0.006,0.006 0 0 1 113.83206,50.322514 0.006,0.006 0 0 1 113.83806,50.316514 0.006,0.006 0 0 1 113.84406,50.322514 M 102.33355,21.333096 A 0.006,0.006 0 0 1 102.32755,21.339096 0.006,0.006 0 0 1 102.32155,21.333096 0.006,0.006 0 0 1 102.32755,21.327096 0.006,0.006 0 0 1 102.33355,21.333096 M 64.391521,55.864605 A 0.006,0.006 0 0 1 64.385521,55.870605 0.006,0.006 0 0 1 64.379521,55.864605 0.006,0.006 0 0 1 64.385521,55.858605 0.006,0.006 0 0 1 64.391521,55.864605 M 63.112575,17.496262 A 0.006,0.006 0 0 1 63.106575,17.502262 0.006,0.006 0 0 1 63.100575,17.496262 0.006,0.006 0 0 1 63.106575,17.490262 0.006,0.006 0 0 1 63.112575,17.496262 M 27.198234,49.857197 A 0.006,0.006 0 0 1 27.192234,49.863197 0.006,0.006 0 0 1 27.186234,49.857197 0.006,0.006 0 0 1 27.192234,49.851197 0.006,0.006 0 0 1 27.198234,49.857197 M 14.309602,18.772854 A 0.006,0.006 0 0 1 14.303602,18.778854 0.006,0.006 0 0 1 14.297602,18.772854 0.006,0.006 0 0 1 28.303602,18.766854 0.006,0.006 0 0 1 14.309602,18.772854"
);
filter: drop-shadow(rgba(0, 0, 0, 0.16) 0px 3px 6px)
drop-shadow(rgba(0, 0, 0, 0.23) 0px 3px 6px);
left: 28px;
opacity: 0.5;
position: absolute;
top: -30px;
transition: transform 400ms, clip-path 400ms, opacity 400ms;
transform: rotate(10deg);
transform-origin: -10% 50%;
}
.tooltip:hover .bubble {
clip-path: path(
"M 231.23262,50.748829 A 30,30 0 0 1 201.23262,80.748829 30,30 0 0 1 171.23262,50.748829 30,30 0 0 1 201.23262,20.748829 30,30 0 0 1 231.23262,50.748829 M 221.85368,17.069946 A 30,30 0 0 1 191.85368,47.069946 30,30 0 0 1 161.85368,17.069946 30,30 0 0 1 191.85368,-12.930054 30,30 0 0 1 221.85368,17.069946 M 191.58533,52.880402 A 30,30 0 0 1 161.58533,82.880402 30,30 0 0 1 131.58533,52.880402 30,30 0 0 1 161.58533,22.880402 30,30 0 0 1 191.58533,52.880402 M 168.56433,11.101538 A 30,30 0 0 1 138.56433,41.101538 30,30 0 0 1 108.56433,11.101538 30,30 0 0 1 138.56433,-18.898462 30,30 0 0 1 168.56433,11.101538 M 143.83806,50.322514 A 30,30 0 0 1 113.83806,80.322514 30,30 0 0 1 83.838058,50.322514 30,30 0 0 1 113.83806,20.322514 30,30 0 0 1 143.83806,50.322514 M 132.32755,21.333096 A 30,30 0 0 1 102.32755,51.333096 30,30 0 0 1 72.327553,21.333096 30,30 0 0 1 102.32755,-8.6669044 30,30 0 0 1 132.32755,21.333096 M 94.385521,55.864605 A 30,30 0 0 1 64.385521,85.864605 30,30 0 0 1 34.385521,55.864605 30,30 0 0 1 64.385521,25.864605 30,30 0 0 1 94.385521,55.864605 M 93.106575,17.496262 A 30,30 0 0 1 63.106575,47.496262 30,30 0 0 1 33.106575,17.496262 30,30 0 0 1 63.106575,-12.503738 30,30 0 0 1 93.106575,17.496262 M 57.192234,49.857197 A 30,30 0 0 1 27.192234,79.857197 30,30 0 0 1 -2.807766,49.857197 30,30 0 0 1 27.192234,19.857197 30,30 0 0 1 57.192234,49.857197 M 44.303602,18.772854 A 30,30 0 0 1 14.303602,48.772854 30,30 0 0 1 -15.696398,18.772854 30,30 0 0 1 14.303602,-11.227146 30,30 0 0 1 44.303602,18.772854"
);
opacity: 1;
transform: rotate(0deg);
}
transitionとclip-pathで表現されている以外は今までと変わりないですが初見だと目は惹かれますね。
html
<div class="title">
Circle
<div class="tooltip">
<div class="tooltip-spacing">
<div class="tooltip-bg1"></div>
<div class="tooltip-bg2"></div>
<div class="tooltip-text">?</div>
<div class="bubble">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 40" height="80" width="210">
<path d="M33.196 0h94.61C134.56 0 140 5.44 140 12.195v15.61C140 34.56 134.56 40 127.805 40h-94.61C26.44 40 21 34.56 21 27.805v-1.903S18.196 15.427 0 20c17.185-10.084 21-5.902 21-5.902v-1.903C21 5.44 26.44 0 33.196 0z" fill="#1a1a1a" />
</svg>
<div class="bubble-text">Hovering circle</div>
</div>
</div>
</div>
</div>
