fabtip

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

  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

  1. Paste the following code within the <head></head> tags:
     
  2. Paste the following code just before </body> tag:

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:
  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 script and call the class you want for that link or image. For example:

Styling the FabTip

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

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

FabTip Download



Leave a comment

Your email address will not be published. Required fields are marked.