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.
80 lines (62 sloc)
2.12 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; | |
| 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 hint--top" data-hint="Yeah, I am >:D">Look, there is something over me.</a> | |
| </p> | |
| <p> | |
| <a href="#" class="hint hint--right" data-hint="Are you sure you are?">I am always right!</a> | |
| </p> | |
| <p> | |
| <a href="#" class="hint hint--bottom" data-hint="Sure. Cheers!">How about a bottoms up?</a> | |
| </p> | |
| <p> | |
| <a href="#" class="hint hint--left" data-hint="LEFT-over Sir...">What do we get now?</a></p> | |
| <p><a class="hint 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 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 hint--left hint--warning" data-hint="This is a warning tooltip">You did something wrong!</a> | |
| </p> | |
| <p> | |
| <a class="hint 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 hint--bottom hint--success" data-hint="This is a success tooltip">Hurray! You have seen all 4 context types.</a> | |
| </p> | |
| <p> | |
| <a class="hint hint--left hint--always" data-hint="...which always keep showing">You can also make tooltips...</a> | |
| </p> | |
| </body> | |
| </html> |