CSSでツールチップを正しく配置する方法
ツールチップを正確に配置するには、CSSの right・left・top・bottom の各プロパティを使用します。これらのプロパティと position: absolute; を組み合わせることで、親要素を基準としてツールチップを上下左右の好きな位置に表示させることができます。
ツールチップを右側に配置する
まずは、マウスカーソルを重ねたときにツールチップが要素の右側に表示される基本的な例を見てみましょう。
サンプルコード
<!DOCTYPE html>
<html>
<style>
.mytooltip .mytext {
visibility: hidden;
width: 140px;
background-color: blue;
color: #fff;
z-index: 1;
top: -6px;
left: 100%;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
}
.mytooltip {
position: relative;
display: inline-block;
}
.mytooltip:hover .mytext {
visibility: visible;
}
</style>
<body>
<div class = "mytooltip">Keep mouse cursor over me
<span class = "mytext"> My Tooltip text</span>
</div>
</body>
</html>
コードのポイント
- .mytooltip に
position: relative;を指定することで、ツールチップの基準となる親要素を作ります。 - .mytext(ツールチップ本体)には
position: absolute;を設定し、left: 100%;によって親要素の右端外側に配置しています。 top: -6px;を指定することで、ツールチップの縦位置を親要素のテキストに揃えています。- 通常時は
visibility: hidden;で非表示にしておき、:hover時にvisibility: visible;へ切り替えることで、マウスオーバーしたときだけツールチップが表示されます。 z-index: 1;を指定することで、周囲の他の要素よりも手前に表示されます。
他の位置への配置も同じ要領で可能
同じ仕組みを使えば、値を変えるだけでツールチップの表示位置を簡単に変更できます。
- 左側に表示する場合:
right: 100%;を指定 - 上側に表示する場合:
bottom: 100%;を指定 - 下側に表示する場合:
top: 100%;を指定
このように、position プロパティと方向指定のプロパティを組み合わせることが、CSSでツールチップを思い通りの位置に配置するための基本となります。
-
CSSでスクロールバーを非表示にする方法をわかりやすく解説
CSSでスクロールバーを非表示にする基本の方法Webページや特定の要素からスクロールバーを非表示にしたい場合、CSSのoverflowプロパティを使うのが最もシンプルな方法です。overflow: hidden;を指定すると、コンテンツが領域からあふれてもスクロールバーが表示されなくなります。実装例<!DOCTYPE html> <html> <head> <style> body { height: 150vh; width: 200vw; overflow: hidden;
-
CSSで矢印を作成する方法！borderとrotateを組み合わせた4方向矢印の実装テクニック
CSSでは、画像やアイコンフォント、外部ライブラリに頼らなくても、border（境界線）とtransform: rotate()を組み合わせるだけで、上下左右どの方向の矢印でも簡単に作成できます。境界線でL字型の角を作り、それを回転させるのが基本的な考え方です。 サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>