javascript - 向左定位工具提示箭头而不是底部
问题描述
我是 html css 的初学者,我创建了一个气泡,当您将鼠标悬停在一个元素上时会出现该气泡。我的问题是气泡指向底部而不是我的元素,如下图所示。我希望箭头指向我的元素,以便我可以跟随它并将鼠标移动到对话气泡上
下面的小代码演示使用文本而不是我的图像:
function showinfo(id){
if(id=="Patmos") document.getElementById("pat-info").style.visibility="visible";
}
function noinfo(id){
if(id=="Patmos"){
document.getElementById("pat-info").style.visibility="hidden";
}
}
.speech-bubble{
visibility: hidden;
}
.speech-bubble::after{
content: "";
position: relative;
margin-left: -5px;
border-width: 10px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
#pat-info{
position:absolute;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
z-index:1;
top:25px;
left:-40px;
}
<a href="#" id="Patmos" onmouseout="noinfo(this.id)" onmouseover="showinfo(this.id)"> I am text </a>
<span class="speech-bubble" id="pat-info"> Info </span>
换句话说,我希望我的文本气泡箭头指向我的文本,以便我可以跟随它并将鼠标移到语音气泡上,因为我想稍后在其上添加链接和按钮。我会感谢您对此的帮助。先感谢您 。
解决方案
这是工具提示中的图像。希望这将帮助您解决您的问题。
a.tooltip span {
z-index:10;
display:none;
padding:10px 10px;
margin-top:40px;
margin-left:-100px;
width:200px;
height: 100px;
border-radius:2px;
box-shadow: 0px 0px 8px 4px #666;
opacity: 0.8;
}
a.tooltip:hover span{
display:inline; position:absolute;
color:#EEE;
background:#333 url(http://www.menucool.com/tooltip/cssttp/css-tooltip-gradient-bg.png) repeat-x 0 0;
}
a.tooltip span::after {
content: " ";
position: absolute;
top: -30px;
left: 25%;
margin-left: -5px;
border-width: 15px;
border-style: solid;
border-color: transparent transparent black transparent;
opacity: 0.8;
}
<a href="#" class="tooltip">
HERE I AM!!!
<span>
<img src="https://via.placeholder.com/200x100" />
</span>
</a>
推荐阅读
- javascript - 在对象数组上映射时使用解构时如何写我的条件
- amazon-web-services - 为 Lambda 授权方启用预置并发
- node.js - 使用 NODE js,我输入 Terminal npm,它开始向我显示错误。而我解决不了
- java - 如何使用线程上下文跨方法传递对象?
- c# - 在 C# 中使用 JSON 路径动态创建 JSON 对象
- python - 如何使用 Python 中的 sum() 函数来查找列表中所有正数的总和?
- kdb - 在这种情况下,如何在 kdb 中编写正确的查询?
- c++ - 尝试编译此构造函数时出现错误
- maven - Jenkins Travis-CI 构建在 cli 模块中失败(阴影失败)
- amazon-web-services - 为什么在 alb.ingress.kubernetes.io/security-groups 注释中提供的安全组上尝试删除