Best 2 Know

The Ultimate Blogging Resource

  • Advertising
  • WebHosting
  • Contact Us
  • Blogger
    • Blogger Templates
    • Blogger Tutorials
  • Browser
    • Firefox
    • Google Chrome
  • Google
  • Internet
    • Facebook
    • Twitter
  • Thesis
  • Windows
  • WordPress
    • WordPress Themes
    • WordPress Plugins
  • More
    • Linux
    • Review
    • Solutions
    • Announcements

TipTip Jquery – Change Default Hyperlink’s Title Style

Long time not posting… Now I’ll share how to integrate TipTip Jquery plugin to your blog. This plugin will change the default title attribute style become interest one. Don’t worry, this plugin is containing no images, it’s all using CSS, so it will load lightly. But, this plugin will not work in IE that we know doesn’t support CSS3.

Well, I don’t have any words again, so let’s go to the steps

Javascript

To use the plugins from Jquery, we must add the library script from jquery. Find </head> and paste the script below above </head>.

<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js’ type=’text/javascript’/> 

If you have already add this code, you no longer need to add this code again.

After that, add the script below. This script is the core of TipTip Jquery.

&lt;script src=’http://mbahrizh.googlecode.com/files/jquery.tipTip.js’ type=’text/javascript’/&gt; 

Also add this script. This script to call the TipTip Jquery.

<script type=”text/javascript”>
$(function(){
$(“.tooltip”).tipTip();
});
</script> 

 

CSS

This plugin use bundled CSS file, so copy code below before </head>.

<link rel=”stylesheet” href=”http://mbahrizh.googlecode.com/files/tipTip.css” /> 

 

HTML

To activate TipTip, you must add class and title attribute to your tag, such as a, div, p, input, etc.
Example below use a tag

<a href=’YOUR-LINK-HERE’ class=’tooltip’ title=’THIS IS THE TITLE COLUMN OR YOU CAN ADD DESCRIPTION’ >This is a link</a> 

If you hover at that link, the container which contain the title attribute will show interestly with some CSS styles.

Some Options

You can add following options to customize it as you wish. Example below is added maxwidth and edgeoffset option.

$(function(){
$(“.tooltip”).tipTip({maxWidth: “auto”, edgeOffset: 10});
}); 

Some other options:

  • activation: string (“hover” by default) – jQuery method TipTip is activated with. Can be set to: “hover”, “focus” or “click”.
  • keepAlive: true or false (false by default) – When set to true the TipTip will only fadeout when you hover over the actual TipTip and then hover off of it.
  • maxWidth: string (“200px” by default) – CSS max-width property for the TipTip element. This is a string so you can apply a percentage rule or ‘auto’.
  • edgeOffset: number (3 by default) – Distances the TipTip popup from the element with TipTip applied to it by the number of pixels specified.
  • defaultPosition: string (“bottom” by default) – Default orientation TipTip should show up as. You can set it to: “top”, “bottom”, “left” or “right”
  • delay: number (400 by default) – Number of milliseconds to delay before showing the TipTip popup after you mouseover an element with TipTip applied to it.

Thats all. See you!!!

Note : If you want completely CSS based tooltip you can click here.

Subscribe via Email

Share this:

  • Twitter
  • Facebook
  • Pocket
  • Print
  • Email

Related

May 13, 2010 Ritesh Sanap Blogger Tutorials Blog Design Series, Blogger Hacks, Cool things, Customization, Jquery

Post navigation

Previous Previous post: Blogger Showing Bx Error? What To Do? (Complete Solution For Fix Bx Error In Blogger)
Next Next post: Adsense Revenue Sharing widget for blogger

Currently Trending

  • Windows Vista CD key
  • How to download Specific parts of YouTube videos
  • How to Increase Dropbox upload speed
  • You might also like this Widget for blogger or Related post widget
  • How to retrieve my Demonoid username
  • Hack Admin From XP Guest Account
  • How to Change the Welcome/Login Screen in Windows XP ?
  • Embed Text Resizing Widget To Increase or Decrease The Font Size
  • h4x0r ( Hacker ) - Blogger Template
  • How to Disable Self Pingback or TrackBack

Random Posts

SEE All Rapidshare Folder’s

January 16, 2008 By Ritesh Sanap Leave a Comment

Ping List for WordPress

April 30, 2011 By Ritesh Sanap 7 Comments

Cleanr – Blogger Template

July 29, 2010 By Ritesh Sanap 15 Comments

Orkut Keyboard Shortcuts

August 11, 2008 By Ritesh Sanap Leave a Comment

How to Skip to Desktop in Windows 8

September 23, 2013 By Ritesh Sanap Leave a Comment

WordPress

HTTP2 Server Push for W3 Total Cache Minify plugin

August 17, 2016 By Ritesh Sanap 5 Comments

How to Disable Emojis in WordPress

January 6, 2016 By Ritesh Sanap Leave a Comment

JetPack Related posts and Sharing not working with NGINX

November 10, 2015 By Ritesh Sanap Leave a Comment

Simply Pure – WordPress Theme

November 2, 2014 By Ritesh Sanap 2 Comments

Advanced What should we Write about next? – WordPress Plugin

July 28, 2014 By Ritesh Sanap Leave a Comment

How to Disable Self Pingback or TrackBack

January 16, 2014 By Ritesh Sanap Leave a Comment

BlueStrap – WordPress Theme

January 1, 2014 By Ritesh Sanap 15 Comments

How to Create Multiple Excerpts in WordPress

December 24, 2013 By Ritesh Sanap Leave a Comment

How to Disable Auto Update in WordPress

November 21, 2013 By Ritesh Sanap Leave a Comment

How to Delete Feedbacks from JetPack Contact Form

November 19, 2013 By Ritesh Sanap 9 Comments

Recent Posts

  • HTTP2 Server Push for W3 Total Cache Minify plugin
  • How to show hidden files and folders in Mac OS X
  • How to Disable Emojis in WordPress
  • Canva – Online Photo Editor
  • JetPack Related posts and Sharing not working with NGINX

Archives

Recommends

  • DigitalOcean – Cloud Hosting
  • Dropbox – Cloud Storage
  • Elegant Themes – WordPress Themes
  • LastPass – Password Manager
  • Like us on Facebook
  • Follow on Twitter
  • +1 on Google
  • Subscribe via Email
  • RSS Feed

© 2021 Best 2 Know · All Rights Reserved · We ♥ DigitalOcean

loading Cancel
Post was not sent - check your email addresses!
Email check failed, please try again
Sorry, your blog cannot share posts by email.