HTML - Create a fancy tooltip using Tipped
by
Jeremy Canfield |
Updated: March 12 2020
| HTML articles
Tipped is software that allows you to create much fancier Tooltips.
- Download the light version of Tipped from http://www.tippedjs.com/download.
- Go to your Downloads folder.
- Extract the tipped-version-light.zip folder.
- Inside the unzipped folder are subfolders css, example,and js). Move the contents of each of these folders to the matching folders on your Web server.
To use Tipped, add the following to the HEAD of your Web page.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="/js/tipped/tipped.js"></script>
<link rel="stylesheet" type="text/css" href="/css/tipped/tipped.css"/>
Then use the following code so that your tooltips are fancy.
<span class="first-tooltip" title="Hello World">The human says</span>
<span class="first-tooltip" title="Hello Lifeform">The Earth responds</span>
<script type="text/javascript">
$(document).ready(function() {
Tipped.create('.first-tooltip');
});
</script>
http://www.tippedjs.com/documentation
Did you find this article helpful?
If so, consider buying me a coffee over at