0

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

4

6 回答 6

2

如果你愿意，你可以用纯 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;
}
于 2013-08-26T18:47:47.377 回答
1

如果您正在寻找基于 jQuery 的解决方案，我会第二次 SiDiX 推荐 qTip。它具有许多功能并且相当容易实现。

由于您提到您仍处于研究阶段，我建议您在“顶级 jquery 工具提示插件”上进行谷歌搜索 - 您会找到很多解决方案。

于 2013-08-26T18:33:49.400 回答
0

你在说工具提示吗？查看这个名为 qTip http://craigsworks.com/projects/qtip/的插件

于 2013-08-26T18:14:26.793 回答
0

我相信您要定义的内容被称为“工具提示”。我喜欢使用PowerTip来实现工具提示。它依赖于 jQuery，有很多有用的选项，并且输出样式简单的工具提示。

于 2013-08-26T18:14:50.257 回答
0

查看Bootstrap并查看他们所说的 Tooltip、popover 和 modal。这应该有助于澄清。

于 2013-08-26T18:17:58.793 回答
0

http://getbootstrap.com/2.3.2/javascript.html#tooltips ...

引导工具提示和弹出窗口...如果需要，您可以在工具提示中放入 html。

于 2013-08-26T18:30:28.933 回答