Question

更新：我看到的问题更多是CSS，而不是Reactjs。所以我用html和css更新了代码。

插图：

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

我想使用CSS来实现。有人可以帮我吗？

查看我要实现的示例。带有箭头的屏幕截图。

这是完整的代码

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

Answer 1

您可以使用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;
 }

获取有效的演示代码here

如何使用CSS

1 个答案: