HTML で要素のカスケード効果を実現するにはどうすればよいですか?

Question

この要素のカスタム ツールヒントを作成したかったのですが、ツールヒントを表示する十分なスペースがないボックス内に含まれているため、切り取られてしまいます (実際には、 により表示されているまでスクロールできます) ;overflow は auto に設定されていますが、スクロールせずに表示されるようにしたいです)。境界を超えて表示する方法はありますか? z-index を使用してみましたが、うまくいきませんでした。

これは私が言ったことです:

.box {
  幅: 100ピクセル;
  高さ: 100ピクセル;
  オーバーフロー: 自動;
  ボーダースタイル: ソリッド;
  境界線の色: 赤;
}

.tooltip{
  パディングトップ: 20px;
  位置: 相対的;
  表示: インラインブロック;
}


.tooltip .tooltiptext {
  表示: なし。
  最大幅: 60vw;
  最小幅: 15vw;
  背景色: 白;
  ボーダースタイル: ソリッド;
  境界線の色: #1a7bd9;
  位置: 絶対;
  z インデックス: 1000000;
}

.tooltip:hover .tooltiptext {
  表示ブロック;
}

<div class='box'>
  <div class='tooltip'> マウスホバー時にツールチップを表示します
    <div class='ツールヒントテキスト'>
      うわー、これはすごいですね、素晴らしいツールヒントのテキストです
    </div>
  </div>
</div>

編集: 重要なことは、ホバーリングは要素が含まれるボックスではなく、要素に対して機能するということです。

Answer 1

これを行う 1 つの方法は、ホバーされたテキストの上下に ::before 疑似要素を作成することです。

リーリー リーリー

Answer 2

これを行う方法はたくさんありますが、ツールチップをコンテナの外に表示したいだけの場合は、z-index や overflow を使用する必要はありません。ツールチップを相対コンテナ内の位置決めコンテキストに移動するだけです。

あなたのコメントに基づいて、テキストの上にマウスを移動したときにのみツールヒントを表示したいので、マウスを移動したいものを相対コンテナでラップすることをお勧めします。これを説明するために、相対コンテナを使用することを決定した場所と比較して、外側のフレームに境界線を追加しました。

次に、正しい要素をターゲットにするために、box:hover を relative-container:hover に変更するだけです。

説明のために、HTML 名とクラス名をよりセマンティックかつ簡潔になるように整理してみました。お役に立てれば！

＃＃＃例＃＃＃

リーリー リーリー