
FabTip
A jQuery Plugin that helps to add tooltips on text and links easily.
The plugin is available as jQuery Plugin and as WordPress Plugin
Unzip & Place
- Unzip your downloaded FabTip.Package.zip file.
- Place fabtip.css in the directory css/ of your website or project.
- Place FabTip.jQuery.js and jquery-1.7.2.min.js in the directory js/ of your website or project.
Setup
- Paste the following code within the <head></head> tags:
123<link rel="stylesheet" type="text/css" href="css/fabtip.css" /><script type="text/javascript" src="js/jquery-1.7.2.min.js" > </script><script type="text/javascript" src="js/FabTip.jQuery.js" > </script> - Paste the following code just before </body> tag:
123<script type="text/javascript" >$('.fabtip').fabtip();</script>
NB: This is the basic calling to show the fabtip. We will see later on the styling options
Using the FabTip
To show FabTip on a link or image is very easy:
- You just have to add the class fabtip and a title to a link or image in this way:
1<a href="#" class="fabtip" title="My title" >link</a> - Add the class and the title for every image and link in which you want to show the fabtip.
- If you want to add more style in the same html document for your fabtip, you just have to set different classes in the script and call the class you want for that link or image. For example:
1234567891011<body><a href="#" class="fabtip" title="My title" >link style 1</a><a href="#" class="fabtip2" title="My title" >link style 2</a>...<script type="text/javascript">$('.fabtip').fabtip({ **style1** });$('.fabtip2').fabtip({ **style2** });</script></body>
Styling the FabTip
To set the style of the FabTip, you just have to declare some parameters in the script like below:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
$('.fabtip').fabtip({ background: '#DDD', bgimg: 'images/wood/3.png', color: 'rgba(0,0,0,0.7)', fontSize: '24px', fontWeight: 'bold', maxWidth: '500px', padding: '1em 2em 1em 2em', opacity: '1', border: 'solid 2px #000', textShadow: '1px 1px 0 rgba(255,255,255,0.6)', shadow: 'inset 0px 0px 10px 0px rgba(0,0,0,0.8)', borderTopLeftRadius: 100, borderTopRightRadius: 10, borderBottomLeftRadius: 10, borderBottomRightRadius: 100 }); |
NB: You don’t need to apply all the properties at the same time.
FabTip Parameters
Property | Description | Type | Example |
---|---|---|---|
background | Sets the backround color | string | background: '#000' |
background image | The path of the background image | string | bgimg: '../images/stripes/lime.png' |
color | Sets the text color | string | color: '#00F' |
fontSize | Sets the font size | string | fontSize: '24px' |
fontWeight | Sets the font weight | string | fontWeight: 'bold' |
maxWidth | Sets the max width of the fabtip | string | maxWidth: '100px' |
padding | Sets the padding in the fabtip | string | padding: '3em 3em 1em 1em' |
opacity | Sets the fabtip opacity | string | opacity: '0.7' |
border | Sets the fabtip border style | string | border: 'dashed 5px #F0F' |
textShadow | Sets the fabtip text shadow | string | textShadow: '1px 1px 0 #999' |
shadow | Sets the fabtip shadow | string | shadow: '4px 4px 10px 0px #222' |
borderTopLeftRadius | Sets the top left round corner radius | number | borderTopLeftRadius: 30 |
borderTopRigthRadius | Sets the top right round corner radius | number | borderTopRightRadius: 30 |
borderBottomLeftRadius | Sets the bottom left round corner radius | number | borderBottomLeftRadius: 30 |
borderBottomRightRadius | Sets the bottom right round corner radius | number | borderBottomRightRadius: 30 |