Snap Builder Public Codes Library
Snap | Generators | Login | Browse | Search | Enter Code | Export Snap Builder Public Codes Library

 

Category: Cascading Style Sheets (HTML5 - SCSS - CSS3 & CSS) >> Tooltips >> Pure CSS Tooltips


Code Snippet </> Info


Snippet Name: Pure CSS Tooltips

Description: Add informative tooltips to your web page.
Compatible Browsers:
Chrome BrowserFirefox BrowserInternet Explorer BrowserOpera BrowserSafari Browser

Example: View Code Demo


Note:

Author: SnapBuilder <snippets@snapbuilder.com>

Last Modified: 2015-08-26 22:53:45

Language: css

Highlight Mode: css

Copy Codes: Use Free Notepad ++
Bookmark and Share

Snap HTML Code Editor:
Paste the source code, make changes and instantly see it in live preview.
Snap HTML Code Editor


  About Copying

<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Pure CSS Tooltips</title> <style> /* Begin Pure CSS Tooltips */ /* == This Script Free To Use Providing This Notice Remains == */ /* == This Script Has Been Found In The http://snapbuilder.com Free Public Codes Library == */ /* == NOTICE:Though This Material May Have Been In A Public Depository, Certain Author Copyright Restrictions May Apply == */ BODY {font-family:verdana,arial,ms sans serif; font-size:90%; background-color:#ffffff; color:#000000; text-shadow:0px 1px 1px rgba(0,0,0,0.2);} #content {margin:0px 15px 0px 15px; padding:15px 15px 15px 15px;} span[data-descr] { position:relative; text-decoration:underline; color:#00F; cursor:help; } span[data-descr]:hover::after { content:attr(data-descr); position:absolute; left:0; top:24px; min-width:200px; border:1px #e6e6e6 solid; border-radius:10px; background-color:#ffffcc; padding:12px; color:#000000; font-size:14px; } </style> </head> <body> <div id="content"> <h3>Pure CSS Tooltips</h3> <p>This is an example <span data-descr="collection of words and punctuation">text</span> with a few <span data-descr="small popups which also hide again">tooltips</span>. Take a <span data-descr="not to be taken literally">look</span>...</p> <br /><br /><br /><br /><br /> <p> [ This code example from <a href="http://snapbuilder.com/code_snippets/copy_code_snippet_186.html">Pure CSS Tooltips Code Snippet</a> page. ] </p> </div> </body> </html>


[ Snippet Options ]

 

© 2002 -  Snap Builder Public Codes Library