我想显示一个红色警报图像以及我的警报数量。图像本身有一个工具提示。我需要将数字放在图像的中间。但后来我的问题是当我将光标放在图像上时,工具提示将不会显示,因为图像位于底层,部分被数字文本阻挡。无论如何,只要我将鼠标悬停在图像的任何部分(包括重叠文本)上,我就可以使工具提示工作吗?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div>
<i class="material-icons" style="font-size:60px;color:red;" title="The alarm is on!">notifications</i>
<div style="position:relative;top:-38px;left:20px"><strong>+2</strong></div>
</div>
</body>
</html>
</body>
</html>
答案 0 :(得分:2)
只需为数字添加标题:)或者您可以创建将使用JS触发的自定义工具提示。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div>
<i class="material-icons" style="font-size:60px;color:red;" title="The alarm is on!">notifications</i>
<div title="The alarm is on!" style="position:relative;top:-38px;left:20px"><strong>+2</strong></div>
</div>
</body>
</html>
</body>
</html>