Speech Bubble-Like jQuery Tooltip Plugin - jtooltip

File Size: 10.2 KB
Views Total: 1450
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Speech Bubble-Like jQuery Tooltip Plugin - jtooltip

jtooltip is a small and skinnable jQuery plugin for creating a glossy speech bubble-like tooltip frame attached to an html element. The plugin currently works with Chrome, Opera and Safari.

How to use it:

1. Load the jquery.tooltip.css for basic and skin styles.

<link type="text/css" rel="stylesheet" href="css/jquery.tooltip.css" />

2. Create a link element and specify a class name (or ID).

<a href="https://www.jqueryscript.net" class="demo" target="blank" title="I'm a tooltip.">jQueryScript</a>

3. Load the jQuery jtooltip at the end of your web page but after jQuery library.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery.tooltip.js"></script>

4. Call the plugin and set the content of the tooltip.

<script type="text/javascript">
$(document).ready(function(){
$(".demo").tooltip({
text: "YOUR CONTENT",
bgColor: "whiteGloss", // whiteGloss, blackGloss, greenGloss, azureGloss, redGloss, pinkGloss, brownGloss
width: "200px"
});
});
</script>

This awesome jQuery plugin is developed by oss6. For more Advanced Usages, please check the demo page or visit the official website.