Comments on: Tooltips with CSS3

By: 30+ Useful CSS3 Tutorials | DesignerWall

30+ Useful CSS3 Tutorials | DesignerWall — Thu, 18 Mar 2010 14:16:44 +0000

[...] Tooltip with CSS3 [...]

By: Ben Barber

Ben Barber — Tue, 02 Mar 2010 14:57:50 +0000

James, this is genious. I'm jealous i didn't think of it first!

I really like this solution, especially when the pseudo element is positioned *above* the element instead of below in order to not conflict with the position of the UA's title rendering. The only drawback is that if title is too long, your text could wrap and obscure the content.

Add a few more CSS3 properties and your CSS3 tooltip is really slick.

a:before {

content: attr(title);

display: none;

position: absolute;

width: 15em;

top: -3em;

left: 0em;

text-align: center;

padding: .5em;

background-color: white;

-webkit-box-shadow: 0 .1em .5em #333;

-moz-box-shadow: 0 .1em .5em #333;

box-shadow: 0 .1em .5em #333;

}

a:hover:before {

display: block;

}

By: Css3 kaynakları | kaynaklar

Css3 kaynakları | kaynaklar — Tue, 09 Feb 2010 12:02:26 +0000

[...] 16. Tooltips with CSS3 [...]

By: 25 Essential Tutorials And Resources For Learning CSS3 | CSS Reflex - Design Blog | Web Design | Inspiration and Resources for Designers

Tue, 09 Feb 2010 02:26:25 +0000

[...] 16. Tooltips with CSS3 [...]

By: Hubert

Hubert — Sun, 17 Jan 2010 00:49:20 +0000

change :hover to :focus
div:focus{
z-index:10;
position:relative;
}

div:focus::before{
width:200px;
display:block;
background:yellow;
border:1px solid black;
padding:8px;
margin:25px 0 0 10px;
}
and add two tabindex=”0″ to divs (or change “div” tag to “a” tag)

Now we have a solution to display title attribut for who navigate with the tab key without js.
lol

By: CSS3 Gallery, Showcase & Inspiration. Showcasing the best CSS3 Web Design on the Internet | CSS3 Tutorials | CSS 3 Gallery

Sat, 16 Jan 2010 16:38:34 +0000

[...] Tooltips with CSS3 – How to make use of the :before (or :after) pseudo element and content property, combined with the :hover pseudo class to create nice tooltips. [...]

By: 網站製作學習誌 » [Web] 連結分享

網站製作學習誌 » [Web] 連結分享 — Wed, 25 Nov 2009 02:40:41 +0000

[...] Tooltips with CSS3 – CSS3 . Info [...]

By: 50+ Stunning CSS3 Articles, Cheat Sheets and Tutorials Collections | tripwire magazine

Sun, 15 Nov 2009 11:34:43 +0000

[...] an image gallery with :target – How to use the new CSS3 selector Tooltips with CSS3 – How to make use of the :before (or :after) pseudo element [...]

By: CSS3的新功能快速体验和应用 | CssRainBow.cn

CSS3的新功能快速体验和应用 | CssRainBow.cn — Mon, 21 Sep 2009 07:59:35 +0000

[...] CSS3 的提示文本 [...]

By: sundowatch

sundowatch — Mon, 24 Aug 2009 23:49:20 +0000

Hey I was doing this job with jQuery before CSS3.

Thanks CSS3..