显示与顶级元素重叠的底层HTML元素的工具提示

时间:2018-03-09 15:55:59

标签: javascript html css

我想显示一个红色警报图像以及我的警报数量。图像本身有一个工具提示。我需要将数字放在图像的中间。但后来我的问题是当我将光标放在图像上时,工具提示将不会显示,因为图像位于底层,部分被数字文本阻挡。无论如何,只要我将鼠标悬停在图像的任何部分(包括重叠文本)上,我就可以使工具提示工作吗?

<!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>

1 个答案:

答案 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>