在 facebook 上，如果您将鼠标悬停在有很多喜欢的内容上，则会弹出一个 div，显示所有喜欢该帖子的人。我想知道是否有人可以模仿css中的div并解释我是如何做到的。下面有一张图片显示了我的意思。我知道你必须在 css 中使用 :after 但我不知道如何定位三角形等等。
这是我在其他地方找到的一些代码：
#pointed {
position: relative;
margin: 0 auto;
width: 200px;
height: 200px;
background-color: white;
}
#pointed:after,
#pointed::after {
position: absolute;
top: 100%;
left: 50%;
margin-left: -50%;
content: '';
width: 0;
height: 0;
border-top: solid 150px red;
border-left: solid 100px transparent;
border-right: solid 100px transparent;
}
你粘贴在那里的代码有它的要点。你可以在这里看到一个工作的 JSFiddle，它使它更像你想要的。
我认为这个问题有两个部分。第一部分是制作三角形。第二部分是定位三角形。
伪元素上的边框负责我们看到的那个三角形。如果您不确定这是如何发生的，请看一下这个很好的答案，我认为它可以很好地解释它。
定位的关键在于让孩子出现在父母之外。我们可以通过absolute在孩子上设置定位来做到这一点。但是，如果我们在完全不改变父级的情况下这样做，则absolute定位将相对于窗口进行设置。
我们在这里想要的是相对于父级定位子级。我们可以通过将父元素的位置设置为除static默认值之外的任何值来做到这一点。在您粘贴的代码中，您可以看到他们将其设置为relative. 关于定位的更多信息，我认为工作文档非常具有解释性。另一个很棒的资源可以在CSS Tricks上找到。
无论如何，我们希望我们的孩子在父母之外。因此，如果我们有一个 5px 高的三角形，用于定位的子元素 CSS 应该如下所示：
position: absolute;
top: -5px;
正如您在上面的 JSFiddle 中看到的那样，这将使它看起来像是附加在顶部。
在按照您想要的方式垂直放置它之后，设置它的left位置以使其沿着水平方向到达您想要的位置。
当然，您必须问自己是否值得重新发明轮子——Bootstrap Jquery附带工具提示。