CSS工具提示tooltip CSS工具提示|CSS2

本文概述

基本工具提示示例
热门工具提示
底部工具提示
左工具提示
正确的工具提示

当用户将鼠标光标移到元素上时, CSS工具提示是一种显示有关某事的额外信息的好方法。
基本工具提示示例让我们创建一个基本的工具提示, 当鼠标光标移到某个元素上时显示。
请参阅以下示例：

< !DOCTYPE html> < html> < style> .tooltip {position: relative; display: inline-block; border-bottom: 1px dotted black; }.tooltip .tooltiptext {visibility: hidden; width: 120px; background-color: red; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; z-index: 1; }.tooltip:hover .tooltiptext {visibility: visible; }< /style> < body style="text-align:center; "> < p> Move the mouse over the text below:< /p> < div class="tooltip"> Hover over me< span class="tooltiptext"> This is tooltip text< /span> < /div> < /body> < /html>

通过使用工具提示, 可以通过四种方式显示工具提示信息的位置：

元素的顶部
元素的左侧
元素的右侧
元素的底部

热门工具提示顶部工具提示指定, 如果将鼠标光标移到元素上, 则工具提示信息将显示在元素顶部。
请参阅以下示例：

< !DOCTYPE html> < html> < style> .tooltip {position: relative; display: inline-block; border-bottom: 1px dotted black; }.tooltip .tooltiptext {visibility: hidden; width: 120px; background-color: red; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; z-index: 1; bottom: 100%; left: 50%; margin-left: -60px; }.tooltip:hover .tooltiptext {visibility: visible; }< /style> < body style="text-align:center; "> < h2> Top Tooltip Example< /h2> < p> Move your mouse cursor over the below heading< /p> < div class="tooltip"> < strong> Welcome to srcmini< /strong> < span class="tooltiptext"> A solution of all technology.< /span> < /div> < /body> < /html>

底部工具提示底部的工具提示指定, 如果将鼠标光标移到元素上, 则工具提示信息将显示在元素的底部。
请参阅以下示例：

< !DOCTYPE html> < html> < style> .tooltip {position: relative; display: inline-block; border-bottom: 1px dotted black; }.tooltip .tooltiptext {visibility: hidden; width: 120px; background-color: red; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; z-index: 1; top: 100%; left: 50%; margin-left: -60px; }.tooltip:hover .tooltiptext {visibility: visible; }< /style> < body style="text-align:center; "> < h2> Bottom Tooltip Example< /h2> < p> Move your mouse cursor over the below heading< /p> < div class="tooltip"> < strong> Welcome to srcmini< /strong> < span class="tooltiptext"> A solution of all technology.< /span> < /div> < /body> < /html>

左工具提示左侧的工具提示指定, 如果将鼠标光标移到元素上, 则工具提示信息将显示在元素的左侧。
请参阅以下示例：

< !DOCTYPE html> < html> < style> .tooltip {position: relative; display: inline-block; border-bottom: 1px dotted black; }.tooltip .tooltiptext {visibility: hidden; width: 120px; background-color: red; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; z-index: 1; top: -5px; right: 105%; }.tooltip:hover .tooltiptext {visibility: visible; }< /style> < body style="text-align:center; "> < h2> Left Tooltip Example< /h2> < p> Move your mouse cursor over the below heading< /p> < div class="tooltip"> < strong> Welcome to srcmini< /strong> < span class="tooltiptext"> A solution of all technology.< /span> < /div> < /body> < /html>

正确的工具提示右侧的工具提示指定, 如果将鼠标光标移到元素上, 则工具提示信息将显示在元素的右侧。
【CSS工具提示tooltip】请参阅以下示例：

< !DOCTYPE html> < html> < style> .tooltip {position: relative; display: inline-block; border-bottom: 1px dotted black; }.tooltip .tooltiptext {visibility: hidden; width: 120px; background-color: red; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; z-index: 1; top: -5px; left: 105%; }.tooltip:hover .tooltiptext {visibility: visible; }< /style> < body style="text-align:center; "> < h2> Right Tooltip Example< /h2> < p> Move your mouse cursor over the below heading< /p> < div class="tooltip"> < strong> Welcome to srcmini< /strong> < span class="tooltiptext"> A solution of all technology.< /span> < /div> < /body> < /html>