Tooltip position

[jundo12]

I'd like to position the following tooltip, not above the links but directly to the right of the links because the links are very tall image links, and the tooltip then pops at the top of the page and is obscured by the content at the top


<style type="text/css">

.tooltip{
display: inline;
position: relative;
}

.tooltip:hover:after{
background: #333;
background: rgba(0,0,0,.8);
border-radius: 5px;
bottom: 10px;
color: #fff;
content: attr(title);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 220px;
}

.tooltip:hover:before{
border: solid;
border-color: #333 transparent;
border-width: 6px 6px 0 6px;
bottom: 20px;
content: "";
left: 50%;
position: absolute;
z-index: 99;
}

</style>

[kjett80]

How tall are your image links?

To push your tooltip down, you can always assign a top position:

Example:


top:100px;


Assuming that your link images are 85-90px tall, this will push it down 100px from the top, since the tooltip is absolute positioned. You can use a percentage as well.

[jundo12]

they are quite tall. almost the height of the screen

[jundo12]

that worked, by the way. thanks :D too simple of a solution. dunno why i didn't think of it.