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-20 12:05:22Z

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

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!
@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.
right: 0 solved my problem, my tooltip was extending past the screen and getting cut off on the right. Thanks :)

CRABOLO · Accepted Answer · 2014-01-20 11:56:44Z

http://jsfiddle.net/FNpK7/

I added

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

Community · Accepted Answer · 2017-05-23 12:15:14Z

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

Collectives™ on Stack Overflow

How to positioning the tooltip above cursor

3 Answers 3

Update

3 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Update

3 Comments

Comments

Comments

Linked

Related