Fabio Della Selva
FabCam Contact Page
Proj. url

Thank you for using FabTip, a jQuery plugin that helps you to show tooltips on links and images.
For any doubt problem or suggestion you can contact me through this contact form


Table of Contents

Getting started - top

Unzip & place

  1. Unzip your downloaded FabTip.Package.zip file.
  2. Place fabtip.css in the directory css/ of your website or project.
  3. Place FabTip.jQuery.js and jquery-1.7.2.min.js in the directory js/ of your website or project.

Setup the plugin

  1. Paste the following code within the <head></head> tags:

    <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>
  2. Paste the following code just before </body> tag:

    <script type="text/javascript" /> 
    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:

  1. You just have to add the class fabtip and a title to a link or image in this way:

    <a href="#" class="fabtip" title="My title" >link</a>
  2. Add the class and the title for every image and link in which you want to show the fabtip.
  3. If you want to add more style in the same html document for your fabtip, you just have to set different classes in the jQuery script and call the class you want for that link or image. For example:
    <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** });

Styling the FabTip - top

To set the style of the FabTip, you just have to declare some parameters in the jQuery call like below:

	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.

Style Properties - top

Tip: Put the mouse pointer over the examples to see the results of the properties
Property Function Type Example
background Sets the backround color string background: '#FF0'
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'
maxWidth: '500px'
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'
border: 'inset 5px #0FF'
textShadow Sets the fabtip text shadow. string textShadow: '1px 1px 0 #999'
textShadow: '1px 1px 1px #F00'
shadow Sets the fabtip shadow. string shadow: '4px 4px 10px 0px #222'
shadow: 'inset 0px 0px 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

Share & Follow - top


Follow @_FabCam


Download & Donate - top


You can download the FabTip Plugin and as jQuery, you can use it under MIT and GPL licenses terms:

Version 0.2 - Alpha


Please if you download and use my plugin, consider to make me a donation.

Thank You!

Credits - top

jQuery write less do more.