純粋な CSS 実装 (スクリプトなし) HTML の必須ツールチップ テキスト プロンプト効果

実行プロセスを分析し、ノードにマウスを移動して、ツールチップの実装 (クラス名、属性など) を有効にするかどうかを検出します。 (クラス名、属性など)。他人から学ぶためのバブル。

まず、 element-ui のツールチップ スタイルを見てみましょう。

明らかに、バブルの位置はJavaScript スクリプトを通じて追加されます。

これ以上の手間は省き、 JavaScriptスクリプトは必要ありません。** (擬似要素の前後を使用して) 新しい要素を追加する必要はありません。** 属性セレクターを直接使用して、クラス名の一致を行う必要はありません。 ([attr ])** デフォルトのスタイルをサポートします** (タグでテーマと位置が定義されていない場合)** 命令型** (タグ内で直接定義し、一致させるために CSS に任せます)** sassを使用しますバブルのテーマと位置を実装するためのプリプロセッサ開発（理解できない学生はCSSに変換できます） HTML定義ディレクティブの仕様

 <button tooltip='私はコンテンツ アヒル'effect='light' Placement='top-left'>左上</button> 

• ツールチップ — バブルによって表示されるコンテンツ。
• 効果 — バブルのテーマ (ダーク/ライト)、デフォルトはダークです。
• 配置 — 親要素に対するバブルの位置 (上 / 左上 / 右上 / 右 / 右上 / 右下...)、デフォルトは上。

最初にいくつかのボタンを作成します

スタイル参照要素-ui

 <div class=container> <div class=top> <button tooltip=top location=top-left effect=light>左上</button> <button tooltip=top left 左上placement=top>top</button> <ボタン tooltip=top-right location=top-right>top-right</button> </div> <div class=left> <button tooltip=左上 左上 左上 左上 左上 左上 左上 左上 location=left-top>左上</button> <button tooltip=left location=left effect=light>left</button> < button tooltip=left and right location=left-bottom >左下</button> </div> <div class=right> <button tooltip=右上 右上 右上 右上 右上 右上 右上 location=right-top>右上</button> <button tooltip=right location=right effect=light>right</button> < button tooltip=right lower location=right-bottom> 右下</button> </div> <div class=bottom> <button tooltip=bottom left lower left place=bottom-left>左下</button> <button tooltip=bottom Placement=bottom effect=light>bottom</button> <button tooltip=bottom right location=bottom-right>右下</button> </div></div>

hover はマウスの出入りを監視します。**[tooltip]** はこの属性を持つラベルと一致します。後はバブル、前は三角形です。

 /* 要素をツールチップ属性と照合します */[tooltip] {position:相対; /* バブルのデフォルトのスタイル*/ &::after { display: none; attr(tooltip) } /* 三角形のデフォルトのスタイル* / & ::before { display: none; content: ''; } /* 要素内にマウスを移動すると、バブルと三角形が表示されます */ &::after { display: block;表示: ブロック; }}

マウスを移動すると効果が有効になります。

効果を簡単に確認するために、テストではデフォルトでバブルと三角形をブロックすることができます。

 /* バブルのデフォルトのスタイル*/&::after { display: block; content: attr(tooltip);}/* 三角形のデフォルトのスタイル*/&::before { display: block; content: '';}

現在の効果は以下の通り

コアディスプレイはもちろん絶対位置に設定されています

 /* バブルのデフォルト スタイル */&::after { 表示: ブロック; 位置: 絶対; テキスト オーバーフロー: 省略記号: 8px 15px;幅: 200px; ボーダー半径: 4px; ボックスシャドウ: 0 10px 20px -5px rgba(0, 0, 0, 0.4); @extend .tooltip-theme-dark; /* デフォルトのテーマを継承します (黒の背景に白のテキスト) */ }/* 三角形のデフォルトのスタイル */&::before { display:ブロック; コンテンツ: ''; 位置: 絶対; 境界: 5px 透明; /* デフォルトのテーマを継承します。 */}

現在の効果は以下の通り

それぞれ 2 つのテーマを定義する

 $white: #fff;$black: #313131;/* バブルのテーマ*/.tooltip-theme-dark { color: $white; 背景の色: $black;}.tooltip-theme-light { color: $black;背景色: $white; ボーダー: 1px ソリッド $black;}/* 三角形のテーマ*/.triangle-theme-dark { border-top-color: $black;}.triangle-theme-light { border-top-color: $black; /* 現時点では dark と同じ */}

 /* バブルの位置*//*----上----*/.tooltip-placement-top { 底: calc(100% + 10px) 変換: 変換(-50%, 0); );}.tooltip-placement-top-right { 下: calc(100% + 10px); 左: 100%; 変換: 変換(-100%, 0)}.tooltip-placement-top-left {bottom:calc(100% + 10px); left:0;transform:translate(0, 0)}/* 三角形の位置*//*----top-- --*/.triangle-placement-top { 底部: calc(100% + 5px); 左: 50%; 変換: 変換(-50%, 0);}.triangle-placement-top-left {下: calc(100% + 5px); 左: 10px;}.triangle-placement-top-right { 下: calc(100% + 5px); }

これはコア コードでもあります。属性セレクターを使用してラベルの値を一致させ、さまざまなスタイルを設定します。

バブル、三角形のテーマのマッチング

 &[effect=light] { &::after { @extend .tooltip-theme-light } &::before { @extend .triangle-theme-light;

バブルと三角形の位置を一致させる、12 個の位置

 @each $placement in top,top-right,top-left,right,right-top,right-bottom,bottom,bottom-right,bottom-left,left,left-top,left-bottom { &[placement=# {$placement}] { &::after { @extend .tooltip-placement-#{$placement} } &::before { @extend .triangle-placement-#{$placement} } ;

ラベルに配置属性がない / が空の場合は、デフォルトで先頭の位置が継承されます。

 &:not([配置]),&[配置=] { &::after { @extend .tooltip-placement-top } &::before { @extend .triangle-placement-top;

現在の効果は以下の通り

テキストを長くして、泡と三角形のデフォルト スタイルに display:none を追加しましょう。

上下左右の4方向に分かれた4つのアニメーション

 @keyframes anime-top { from { 不透明度: .5; 底部: 150%; }}@keyframes anime-bottom { から { 不透明度: 150%; .5; 右: 150%; }}@keyframes anime-right { から { 不透明度: 150%;

バブルの位置を一致させて、**[attr^=]** を使用して選択します。たとえば、左上と右上を一致させることもできます。

 /* アニメーションを設定*/@each $placement in top, right,bottom,left { &[placement^=#{$placement}] { &::after, &::before { anime: anime-#{$placement} 300ms イーズアウト転送; } }

最終的な効果は以下の通り

コードペンのアドレス codepen.io/anon/pen/yR… が添付されています。

上記は、エディターによって導入された純粋な CSS 実装 (スクリプトなし) の HTML ディレクティブ ツールチップ テキスト プロンプト効果です。ご質問がある場合は、メッセージを残してください。エディターが返信します。時間。また、VeVb武道サイトを応援してくださった皆様、誠にありがとうございました！

この記事が役立つと思われる場合は、転載していただいてかまいませんので、出典を明示してください。ありがとうございます。