Rebecca Rebecca - 7 months ago 22
Javascript Question

How do i make a link so that whenever i hover over the link, a DIV (with text) appears to the right of the mouse pointer?

i want to have a link so that whenever the mouse hovers over the link, a DIV element containing a single line of text appears to the right of the mouse pointer, this is what i have so far but it doesnt appear close to the right of the mouse pointer, please see my jsfiddle link https://jsfiddle.net/ad2xbxwq/ this is sample html code i used

<span>
<a href="html_images.asp" >HTML Images</a> <br>
<a href="www.google.com" >GOOGLE</a>
</span>

<div class="example">I will show on hover</div>

Answer

If you don't are looking for tooltips but a div that appear on hover next the div

#example{
background-color: blue;
padding: 20px;
display: none;
position: absolute;
left: 250px;
top: 10px;
width: 200px;

}


span:hover + div {
  display: inline;
}

see this jsfiddle https://jsfiddle.net/66roekmh/

Comments