html5教程——— 提示工具(Tooltip)好看的提示框

html5教程——— 提示工具(Tooltip)好看的提示框前段大G > HTML5网页设计 > 最新文章 >

基础提示框(Tooltip)

提示框在鼠标移动到指定元素上显示

		<!DOCTYPE html>

		<html lang="en">

		<head>

		    <meta charset="UTF-8">

		    <meta http-equiv="X-UA-Compatible" content="IE=edge">

		    <meta name="viewport" content="width=device-width, initial-scale=1.0">

		    <title>CSS Position(定位)网页定位</title>

		    <link rel="stylesheet" href="./css/index.css">

		    <style>

		        /* 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;

		        }

		    </style>

		</head>

		<body>

		    <div class="tooltip">鼠标移动到这 <span class="tooltiptext">提示文本</span> </div>

		</body>

		</html>