CSSツールチップ入門（詳しい解説）
この章では、CSS ツールチップの概要 (詳細な説明) を説明します。困っている友人は参考にしていただければ幸いです。
プロンプト ツールは、マウスが指定された要素に移動した後にトリガーされ、頭部表示、右側表示、左側表示、下部表示の 4 つの方向に表示できます。
1. 基本的なプロンプト ボックス (ツールチップ)
プロンプト ボックスは、マウスが指定された要素に移動すると表示されます:
/* Tooltip 容器 */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black; /* 悬停元素上显示点线 */
}
/* Tooltip 文本 */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* 定位 */
position: absolute;
z-index: 1;
}
/* 鼠标移动上去后显示提示框 */
.tooltip:hover .tooltiptext {
visibility: visible;
}分析例
HTML) コンテナー要素 (
ツールヒント テキストをインライン要素 ( など) に配置し、class="tooltiptext" を使用します。
CSS)ツールチップ クラスはposition:relativeを使用し、プロンプト テキストは位置決め値position:absoluteを設定する必要があります。注: 次の例では、さらに多くの位置決め効果を示します。
tooltiptext クラスは、実際のツールヒント テキストに使用されます。モーダルは非表示になっており、マウスを要素の上に移動すると表示されます。幅、背景色、文字色などのスタイルが設定されています。
CSS3 border-radius プロパティは、プロンプト ボックスに丸い角を追加するために使用されます。
:ホバー セレクターは、マウスが指定された要素
2. プロンプト ツールの配置
次の例では、プロンプト ツールは右側 (左:105%) に表示されます。指定された要素。
top:-5px は、コンテナ要素の中央に配置されるのと同じであることに注意してください。ツールヒント テキストの上下のパディングは 5 ピクセルであるため、数値 5 を使用します。
パディング値を変更する場合は、中央に配置されるように、それに応じて上部の値も変更する必要があります。
これは、プロンプト ボックスが左側に表示されている場合にも当てはまります。
が右側に表示されます:
.tooltip .tooltiptext {
top: -5px;
left: 105%;
}が左側に表示されます:
.tooltip .tooltiptext {
top: -5px;
right: 105%;
}ツールチップを表示したい場合ヘッダーと下部。 margin-left 属性を使用し、-60px に設定する必要があります。この数値は、中央揃えの幅の半分、つまり幅/2 (120/2 = 60) を使用して計算されます。
先頭に表示:
.tooltip .tooltiptext {
width: 120px;
bottom: 100%;
left: 50%;
margin-left: -60px; /* 使用一半宽度 (120/2 = 60) 来居中提示工具 */
}下に表示:
.tooltip .tooltiptext {
width: 120px;
top: 100%;
left: 50%;
margin-left: -60px; /* 使用一半宽度 (120/2 = 60) 来居中提示工具 */
}3.矢印の追加
CSS 擬似要素::after 属性と content 属性を使用して、ツール ヒントの小さな矢印記号を作成できます。矢印は境界線で構成されますが、組み合わせると、ツールツールは音声情報のように見えます。
次の例は、上部に表示されるツールチップに下部の矢印を追加する方法を示しています:
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 100%; /* 提示工具底部 */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}分析例
ツールチップ内に矢印を配置: 上部: 100% 、ツールチップの下部に矢印が表示されます。左: 50% は矢印を中央揃えに使用します。
注: border-width 属性は矢印のサイズを指定します。変更する場合は、margin-left の値も変更します。こうすることで、矢印を中央に表示することができます。
border-color は、コンテンツを矢印に変換するために使用されます。上の境界線を黒に設定し、残りの境界線を透明に設定します。他の設定も黒色の場合は黒色の四角形で表示されます。
次の例は、ツールチップの頭に矢印を追加する方法を示しています。境界線の色の設定に注意してください:
下部のヒント ボックス/上部の矢印:
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
bottom: 100%; /* 提示工具头部 */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}次の 2 つの例は、左側と右側の矢印の例です:
右プロンプト ボックス/左矢印:
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
right: 100%; /* 提示工具左侧 */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}#左側のプロンプト ボックス/右側の矢印:
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
left: 100%; /* 提示工具右侧 */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent transparent black;
}4. フェードイン効果
CSS3 トランジション属性を使用できます。プロンプト ツールのフェードイン効果を実現するための透明度属性と不透明度属性:左プロンプト ボックス/右矢印:
.tooltip .tooltiptext {
opacity: 0;
transition: opacity 1s;
}
.tooltip:hover .tooltiptext {
opacity: 1;
}.wrapper {
text-transform: uppercase;
background: #ececec;
color: #555;
cursor: help;
font-family: "Gill Sans", Impact, sans-serif;
font-size: 20px;
margin: 100px 75px 10px 75px;
padding: 15px 20px;
position: relative;
text-align: center;
width: 200px;
-webkit-transform: translateZ(0); /* webkit flicker fix */
-webkit-font-smoothing: antialiased; /* webkit text rendering fix */
}
.wrapper .tooltip {
background: #1496bb;
bottom: 100%;
color: #fff;
display: block;
left: -25px;
margin-bottom: 15px;
opacity: 0;
padding: 20px;
pointer-events: none;
position: absolute;
width: 100%;
-webkit-transform: translateY(10px);
-moz-transform: translateY(10px);
-ms-transform: translateY(10px);
-o-transform: translateY(10px);
transform: translateY(10px);
-webkit-transition: all .25s ease-out;
-moz-transition: all .25s ease-out;
-ms-transition: all .25s ease-out;
-o-transition: all .25s ease-out;
transition: all .25s ease-out;
-webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
-moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
-ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
-o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
}
/* This bridges the gap so you can mouse into the tooltip without it disappearing */
.wrapper .tooltip:before {
bottom: -20px;
content: " ";
display: block;
height: 20px;
left: 0;
position: absolute;
width: 100%;
}
/* CSS Triangles - see Trevor's post */
.wrapper .tooltip:after {
border-left: solid transparent 10px;
border-right: solid transparent 10px;
border-top: solid #1496bb 10px;
bottom: -10px;
content: " ";
height: 0;
left: 50%;
margin-left: -13px;
position: absolute;
width: 0;
}
.wrapper:hover .tooltip {
opacity: 1;
pointer-events: auto;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
/* IE can just show/hide with no transition */
.lte8 .wrapper .tooltip {
display: none;
}
.lte8 .wrapper:hover .tooltip {
display: block;
}
以上がCSSツールチップ入門（詳しい解説）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7444
15
1371
52
76
11
10
6
ブートストラップボタンの使用方法
Apr 07, 2025 pm 03:09 PM
ブートストラップボタンの使用方法は？ブートストラップCSSを導入してボタン要素を作成し、ブートストラップボタンクラスを追加してボタンテキストを追加します
ブートストラップに写真を挿入する方法
Apr 07, 2025 pm 03:30 PM
ブートストラップに画像を挿入する方法はいくつかあります。HTMLIMGタグを使用して、画像を直接挿入します。ブートストラップ画像コンポーネントを使用すると、レスポンシブ画像とより多くのスタイルを提供できます。画像サイズを設定し、IMG-Fluidクラスを使用して画像を適応可能にします。 IMGボーダークラスを使用して、境界線を設定します。丸い角を設定し、IMGラウンドクラスを使用します。影を設定し、影のクラスを使用します。 CSSスタイルを使用して、画像をサイズ変更して配置します。背景画像を使用して、背景イメージCSSプロパティを使用します。
ブートストラップにファイルをアップロードする方法
Apr 07, 2025 pm 01:09 PM
ファイルアップロード機能は、Bootstrapを介して実装できます。手順は次のとおりです。BootstrapCSSおよびJavaScriptファイルを紹介します。ファイル入力フィールドを作成します。ファイルアップロードボタンを作成します。ファイルのアップロードを処理します（FormDataを使用してデータを収集し、サーバーに送信します）。カスタムスタイル（オプション）。
ブートストラップリストでデフォルトスタイルを削除する方法は？
Apr 07, 2025 am 10:18 AM
ブートストラップリストのデフォルトスタイルは、CSSオーバーライドで削除できます。より具体的なCSSルールとセレクターを使用し、「近接原理」と「重量原理」に従って、ブートストラップのデフォルトスタイルをオーバーライドします。スタイルの競合を避けるために、よりターゲットを絞ったセレクターを使用できます。オーバーライドが失敗した場合は、カスタムCSSの重量を調整します。同時に、パフォーマンスの最適化に注意を払い、重要な！の過剰使用を避け、簡潔で効率的なCSSコードを書いてください。
ブートストラップの日付を表示する方法
Apr 07, 2025 pm 03:03 PM
回答：ブートストラップの日付ピッカーコンポーネントを使用して、ページで日付を表示できます。手順：ブートストラップフレームワークを紹介します。 HTMLで日付セレクター入力ボックスを作成します。ブートストラップは、セレクターにスタイルを自動的に追加します。 JavaScriptを使用して、選択した日付を取得します。
ブートストラップナビゲーションバーの設定方法
Apr 07, 2025 pm 01:51 PM
ブートストラップは、ナビゲーションバーをセットアップするための簡単なガイドを提供します。ブートストラップライブラリを導入してナビゲーションバーコンテナを作成するブランドアイデンティティの作成ナビゲーションリンクの作成他の要素の追加（オプション）調整スタイル（オプション）
ブートストラップのレイアウト方法
Apr 07, 2025 pm 02:24 PM
Bootstrapを使用してWebサイトをレイアウトするには、グリッドシステムを使用してページをコンテナ、行、列に分割する必要があります。最初にコンテナを追加し、その中の行を追加し、行内の列を追加し、最後に列にコンテンツを追加します。ブートストラップのレスポンシブレイアウト関数は、ブレークポイント（XS、SM、MD、LG、XL）に従ってレイアウトを自動的に調整します。レスポンシブクラスを使用することで、異なる画面サイズの下の異なるレイアウトを実現できます。
