时间戳

首页 > 解决方案 > 如何使用 CSS 将工具提示指针添加到 div

css - 如何使用 CSS 将工具提示指针添加到 div

问题描述

更新：我发现我的问题更多是 CSS 而不是 Reactjs。所以我用 HTML 和 CSS 更新了代码。

插图：

当用户点击时，下面的代码工作正常。现在我要添加的是使用 CSS 的工具提示指针。指针应指向显示按钮。

如何使用 CSS 实现它？

请参阅我想要实现的示例。带有指向它的箭头的屏幕截图。

显示工具提示指针的屏幕截图，如 bty 箭头所示

这是完整的代码

<html>
<head>
<style>

#stuffToShow {
    display:none;
}

#checkbox {
    opacity:0.01;

}

#checkbox:checked + #stuffToShow {
    display:block;
}

.checkbox_tooltip {
position: relative;
boxShadow: 0 3px 8px rgba(0, 0, 0, 0.25);
borderRadius: 3px 3px 3px 3px;
border: 1px solid rgba(100, 100, 100, 0.4);
width: 500px;
height: 200px;
float: right;
}

</style>

<body>
<label style="float:right;" for="checkbox" id="checkboxLabel">Show Content via Tooltip</label>
<input type="checkbox" id="checkbox" />


<div id="stuffToShow" class="checkbox_tooltip">
    content appears here
</div>

</body>
</html>

标签： css

解决方案

您可以使用它来实现它border-width

  .Tooltip:before,
  .Tooltip:after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
  }
 .Tooltip:before {
   border-left: 10px solid transparent;
   border-right: 10px solid transparent;
   border-bottom: 10px solid #ccc;
   top: -10px;
   right: 15px;
  }
 .Tooltip:after {
   border-left: 8px solid transparent;
   border-right: 8px solid transparent;
   border-bottom: 8px solid #f7f7f7;
   top: -8px;
   right: 17px;
 }

在此处获取工作演示代码

推荐阅读