javascript - 将工具提示箭头定位在左侧而不是底部

Question

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

换句话说，我希望我的文本气泡箭头指向我的文本，以便我可以跟随它并将鼠标移到语音气泡上，因为我想稍后在其上添加链接和按钮。我将感谢您对此的帮助。预先感谢您。

Answer 1

这是工具提示中包含图像的一个。希望这能帮助您解决问题。

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>