How to positioning the tooltip above cursor

Question

I'm implementing a tooltip css only in my new website project.

But how can I set the tooltip to show up above the cursor?

The CSS that I have:

a.tooltip {outline:none;}
a.tooltip strong {line-height:30px;}
a.tooltip:hover {text-decoration:none; cursor: help;} 
a.tooltip span {
z-index:10;display:none; padding:14px 20px;
margin-top:-30px; margin-left:28px;
width:220px; line-height:17px;
}

a.tooltip:hover span{
display:inline; position:absolute; color:#373535;
border:2px solid #D3D3D3; background:#fffFff;}

/*CSS3 extras*/
a.tooltip span
{
    border-radius:5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;

    -moz-box-shadow: 1px 1px 8px #CCC;
    -webkit-box-shadow: 1px 1px 8px #CCC;
    box-shadow: 1px 1px 8px #CCC;
}

This is the html:

<a href="#" class="tooltip">Normal Text<span><strong>Tooltip title</strong><br />This would be the content of the tooltip that I want to show up above the cursor.</span></a>

Thanks for help me out guys!

Regards, Dylan

Hashem Qolami · Accepted Answer · 2014-01-20T12:05:22.113

3

First set position of the anchor tag to relative to set that as a reference point for absolute positioned children.

Then use the following CSS declaration:

a.tooltip span {
    z-index:10;
    display:none;
    padding:14px 20px;
    width:220px;
    line-height:17px;
}

a.tooltip:hover span {
  display:block;
  position:absolute;
  bottom: 2em;       /* Use a relative unit to increase the capability */
  left: 0;
  color:#373535;
  border:2px solid #D3D3D3;
  background:#fffFff;
}

JSBin Demo

Update

If you want to display the tooltip box at top center, set the left property to 50% then transform: translateX(-50%):

a.tooltip:hover span {
  /* ... */
  left: 50%;
  -webkit-transform: translateX(-50%);
}

Updated Demo

edited Jan 20 '14 at 12:05

answered Jan 20 '14 at 11:57

Hashem Qolami

97,268
26
150
164

1

Great! But now if I view it on an ipad and the tooltip comes outside the viewport, the tooltip will cut of. How to modify the code that the tooltip will always be inside the viewport? Thanks again! – Crossflipje Jan 20 '14 at 12:50
1

@user3214942 Since the *tooltip* is positioned *absolutely*, it is removed from the *document normal flow*. There isn't a **pure CSS** way to achieve this unless you use **Javascript**. If the *tooltip* is cut off from the left side. set `left: 0` instead. but for the top side, there should be some appropriate space above the ancher tag, Or you need to display the *tooltip* under the curser. – Hashem Qolami Jan 20 '14 at 12:57
`right: 0` solved my problem, my tooltip was extending past the screen and getting cut off on the right. Thanks :) – jhhoff02 Oct 04 '16 at 14:39

score 0 · Answer 2 · answered Jan 20 '14 at 11:56

0

http://jsfiddle.net/FNpK7/

I added

a.tooltip span {
    position: relative; display: inline-block;
    margin-top:-120px; margin-left: -100px;
}

answered Jan 20 '14 at 11:56

CRABOLO

8,605
39
41
68

score 0 · Answer 3 · edited May 23 '17 at 12:15

0

Check this http://jsfiddle.net/RPNUx/

a.tooltip span {
z-index:10;display:none; padding:14px 20px;position:fixed;
margin:-50px;
width:220px; line-height:17px;
}

OR check this answer HTML-Tooltip position relative to mouse pointer

edited May 23 '17 at 12:15

Community

1
1

answered Jan 20 '14 at 11:57

Sajad Karuthedath

14,987
4
32
49

How to positioning the tooltip above cursor

3 Answers3

Update