javascript - jquery/javascript/html/css 中调用的弹出框/吸尘器框是什么

Question

我正处于研究如何做某事的开始阶段，不确定我要研究的内容的正确名称是什么，以及是否可以在 jquery 或 jquery 和 css 的混合中完成某些事情。我正在寻找的是类似于将鼠标悬停在某物上时弹出的小窗口；类似于将鼠标悬停在超链接上会显示完整链接。但它将被设计成看起来像对话框的样式，而不是将鼠标悬停在它上面，用户必须单击它才能看到该对话框，但它的显示方式类似于将鼠标悬停在某些东西上。我希望这个问题很清楚，我没有想太多。

Answer 1

如果你愿意，你可以用纯 CSS 做到这一点

DEMMO jsFiddle

#talkbubble {
   width: 120px;
   height: 80px;
   background: red;
   position: relative;
    margin-left:100px;
    padding:10px;
   -moz-border-radius:    10px;
   -webkit-border-radius: 10px;
   border-radius:         10px;
}
#talkbubble:before {
   content:"";
   position: absolute;
   right: 100%;
   top: 26px;
   width: 0;
   height: 0;
   border-top: 13px solid transparent;
   border-right: 26px solid red;
   border-bottom: 13px solid transparent;
}
.alert {
  display: none;
}
span {
    display: line-block;
    position: absolute;
    left: 10px;
    top:45px;
}

span:focus ~ .alert {
  display: block;
}