position tooltip arrow left instead of bottom

user_14061549 0
Viewed 380

I'm a beginner in html css and I have created a speech bubble that appears when you hover over an element . My problem is that the speech bubble points to the bottom instead of my element as is shown in the pic below . I want the arrow to point to my element so that I can follow it and move my mouse on the speech bubble

enter image description here

A small code demo below using text instead of my image :

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>

In other words I want my text bubble arrow to point to my text so that I can follow it and move my mouse over the speech bubble since I want to add links and buttons on it later . I would appreaciate your help with this . Thank you in advance .

css html javascript
2 Answers

Check this out.

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";
    }

}
#Patmos {
  text-align:center;
}

.speech-bubble{
    visibility: hidden;
    position:absolute;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    z-index:1;
    top:35px;
    left: -25px;
}
.speech-bubble:hover {
  visibility: visible;
}
.speech-bubble::after {
  content: " ";
  position: absolute;
  top: -15px; /* At the bottom of the tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 8px;
  border-style: solid;
  border-color: transparent transparent black transparent;
}
<a href="#" id="Patmos" onmouseout="noinfo(this.id)" onmouseover="showinfo(this.id)"> I am text <span class="speech-bubble" id="pat-info"> Info </span></a>

user_99657240

Here's one with the image in the tooltip. Hope this will help you to sort out your issue.

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>

user_99657240
Related