Linkin Tips

For what ?

This plugin allows you to personalize your tooltips by returning them sexier!
Nothing again, will say yourselves. Of course, yes, because in more they are going to allow you to show a link, which can possess itself a tooltip (but not stylish that one), since the title attribute of an element.

See the demonstration

For example, the second image of the demonstration possesses as title: "the chocolate which smiles to you, to go to the page http: // chocolat.net / to be able to learn it more on the chocolate".
All which is to go after "to the page" will be transformed into link, and what is after "to be able to" title of this link. All this is customizable in the parameters of the plugin.

The important is that in the end, even with deactivated javascript your titles keep a sense!

Usage

This type of tool is very simple to set up because it is a plugin of the jQuery library. It's also very light (1,2 ko) and can be reduced thanks to the Gzip compression in approximately 0,52 ko.

  1. Load the file of the styles of the plugin. This code for calling the CSS file must be placed before the </head> tag:
    <link href="css/juizLinkinTips.css" rel="stylesheet"
    type="text/css" media="screen, projection" />
    These styles are customizable, naturally.
  2. Download the jQuery library, or make a link from the Google API .
    Place this call of the javascript file just before the </body> tag:
    <script 
    type="text/javascript" 
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js">
    </script>
  3. Load the file of the plugin in the same way by placing it after the line of call of the library. Here we imagine that your scripts are in the root of your site, in a directory named "scripts". To you to modify this road if need:
    <script 
    type="text/javascript"
    src="/scripts/juizLinkinTips.min.js">
    </script>
  4. Call the function by targeting exactly the elements of your page which will be carriers of these tooltips. Place this code following the previous two lines :
    <script type="text/javascript">
    	$(document).ready(function() {
    		$("img[title]").juizLinkinTips();
    	});
    </script>
    Here the images possessing a title will be carriers of these tooltips.

Customization

You can customize your tooltip thanks to the styles (CSS), but also thanks to the following parameters among which here are the values by default:

Name Description Value / "Default"
beforeURL The marker of the URL to come Characters string
"aller à la page"
beforeTitle The marker of the link's title attribute. Characters string
"pour pouvoir"
gotoOpacity Opacity at the end of the animation An integer between 0 and 1 (e.g.: 0.75)
"0.9"
gotoTop Position at the end of the animation Pixels value
"-17px"
gotoLeft Position at the end of the animation Pixels value
"27px"
duration Duration of the animation An integer (milliseconds)
"300"
tipsDelay Delay before disappearance of the tooltip An integer (milliseconds)
"300"

If you wish it we speak about it on the blog, so don't hesitate to ask your questions!

When you wish to modify a style, you just have to complete the function like that

$("img[title]").juizLinkinTips({
	'duration' 	: "200",
	'beforeURL'		: ">>"
});

Here the duration of animation was shortened and the marker of departure of the URL is >> (that it will be necessary to you to write &gt;&gt; in your title)

* jQ.CreativeJuiz.fr *