Permalink
Cannot retrieve contributors at this time
Name already in use
A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
hint.css/demo.html
Go to fileThis commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
93 lines (71 sloc)
2.4 KB
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | |
| <title>Demo | hint.css</title> | |
| <meta name="description" content="A tooltip library in CSS"> | |
| <meta name="viewport" content="width=device-width"> | |
| <style type="text/css"> | |
| body { | |
| text-align: center; | |
| font-family: Arial; | |
| background: #C2E2F2; | |
| height: 100%; | |
| font-size: 18px; | |
| color: #444; | |
| } | |
| h1 { | |
| font-size: 5em; | |
| } | |
| h1,h3{ | |
| margin: 5px 0; | |
| } | |
| a { | |
| color: #1A5A7A; | |
| outline: none; | |
| text-decoration: none; | |
| } | |
| </style> | |
| <link rel="stylesheet" href="hint.css"> | |
| </head> | |
| <body> | |
| <h1>HINT.css</h1> | |
| <h3>A tooltip library in CSS</h3> | |
| <p> | |
| <a href="#" class="hint--top" data-hint="Yeah, I am >:D">Look, there is something over me.</a> | |
| </p> | |
| <p> | |
| <a href="#" class="hint--right" data-hint="Are you sure you are?">I am always right!</a> | |
| </p> | |
| <p> | |
| <a href="#" class="hint--bottom" data-hint="Sure. Cheers!">How about a bottoms up?</a> | |
| </p> | |
| <p> | |
| <a href="#" class="hint--left" data-hint="LEFT-over Sir...">What do we get now?</a></p> | |
| <p><a class="hint--right" data-hint="Made by Kushagra Gour" target="_blank" href="https://twitter.com/chinchang457"><img src="http://www.gravatar.com/avatar/6be4e636e8aacd405bed5cd15124a875?s=80&d=mm&"></a> | |
| </p> | |
| <p> | |
| <a class="hint--top hint--error" data-hint="This is an error tooltip">Oh man! You are gonna self-destruct in 5 sec.</a> | |
| </p> | |
| <p> | |
| <a class="hint--left hint--warning" data-hint="This is a warning tooltip">You did something wrong!</a> | |
| </p> | |
| <p> | |
| <a class="hint--right hint--info" data-hint="This is an info tooltip">You can use different classes for different types of tooltips.</a> | |
| </p> | |
| <p> | |
| <a class="hint--bottom hint--success" data-hint="This is a success tooltip">Hurray! You have seen all 4 context types.</a> | |
| </p> | |
| <h3>Extra</h3> | |
| <p> | |
| <a class="hint--left hint--always" data-hint="...which always keep showing">You can also make tooltips...</a> | |
| </p> | |
| <p> | |
| <a class="hint--top hint--rounded" data-hint="We have rounded corners for you">Hmm...So you don't like sharp edges?</a> | |
| </p> | |
| <h3>Effects</h3> | |
| <p> | |
| <a class="hint--right hint--bounce" data-hint="Bounce">Adding a <code>hint--bounce</code> class gives you that...</a> | |
| </p> | |
| </body> | |
| </html> |