なんの変哲もないツールチップです。
要素を画面の右端に配置すると横スクロールが発生しやがりました。
left: 0を指定しているので当たり前といえば当たり前なのでしょう。ツールチップの実装は以下です。MDNを参考にしています。
<span data-tooltip="ツールチップの表示内容です。"> ツールチップ </span>
[data-tooltip] { position: relative; } [data-tooltip]::before, [data-tooltip]::after { position: absolute; top: 100%; left: 0%; z-index: 1; opacity: 0; visibility: hidden; pointer-events: none; } /* ツールチップの吹き出し部分 */ [data-tooltip]::before { margin-top: -5px; margin-left: 10px; border: 5px solid transparent; border-bottom-color: #000000; content: ""; } /* ツールチップのテキスト部分 */ [data-tooltip]::after { margin-top: 5px; padding: 4px 7px; border-radius: 5px; background: #000000; color: #ffffff; font-size: 12px; white-space: nowrap; content: attr(data-tooltip); } [data-tooltip]:hover::before, [data-tooltip]:hover::after { opacity: 0.8; visibility: visible; }
シンプルな対応
せっかくHTMLとCSSだけでツールチップを実装できているので余計なことはしたくありません。要素を右端に配置する場合のみクラスを付与して、ツールチップのテキスト部分を右寄せにします。
<span class="tooltip-right" data-tooltip="ツールチップの表示内容です。"> ツールチップ </span>
[data-tooltip].tooltip-right::after { left: auto; right: 0%; }
スタイル指定を打ち消すために初期値であるleft: autoを指定します。打ち消すくらいなら.tooltip-leftを用意しいいかもしれませんね。
要素が動的に配置される場合は？
私のケースでは今のところ上記の方法で解決できそう。
要素が動的に配置される場合はどうでしょうか。これはもう計算するしかありません。
- ウィンドウの横幅を取得
- 要素の左端のX座標を取得
- ツールチップのテキスト部分の幅を取得
- 1 - (2 + 3)が負の場合に右寄せクラスを付与する
といったイメージ。ツールチップのテキスト部分は疑似要素なのでgetComputedStyleを使うとよさそうです。Reactの話になりますが、コンポートを作成してrefを使うと要素の特定が楽です。短縮表示の際の実装が参考になります。
