HTMLとCSSだけでツールチップを作成
HTMLとCSSだけでツールチップを作成する簡単なサンプルコードとデモを記述してます。
環境
- OS windows10 64bit
- chrome 86.0.4240.198
ツールチップとは
ツールチップとは対象の要素にマウスオーバーした際に表示される補足説明などのことを言います。
サンプルコード
以下はHTMLとCSSだけでツールチップを作成するサンプルコードとなります。
<style>
.tooltip{
position: relative;
cursor: pointer;
display: inline-block;
background: #efefef;
padding: 20px 0 0 20px;
width: 100%;
border-radius: 2px;
margin-bottom: 100px;
}
.tooltip_target{
margin:0;
padding:0;
font-size: 1.2em;
padding: 0.2em;
}
.tooltip_description {
display: none;
position: absolute;
padding: 10px;
font-size: 12px;
line-height: 1.6em;
color: #fff;
border-radius: 5px;
background: #37b507;
width:50%;
}
.tooltip_description:before {
content: "";
position: absolute;
top: -24px;
left: 10%;
border: 15px solid transparent;
border-top: 15px solid #37b507;
margin-left: -15px;
transform: rotateZ(180deg);
}
.tooltip:hover .tooltip_description{
display: inline-block;
top: 60px;
left: 0px;
}
</style>
<div class="tooltip">
<p><a href="#" class="tooltip_target">この部分</a>をマウスオーバー、スマホの場合はタップしてください。</p>
<div class="tooltip_description">吹き出しの位置は「.tooltip:hover .tooltip_description」で指定して、吹き出しの矢印は「transform: rotateZ(180deg);」回転できます。 </div>
</div>
ブラウザ上で表示した結果
この部分をマウスオーバー、スマホの場合はタップしてください。
吹き出しの位置は「.tooltip:hover .tooltip_description」で指定して、吹き出しの矢印は「transform: rotateZ(180deg);」回転できます。
-
前の記事
php ordで文字列のASCIIコード値を取得する 2020.12.10
-
次の記事
dockerを使って「chatwoot」を構築するまでの手順 2020.12.11
コメントを書く