# jQuery Simple Tooltip

## Démonstration

Au survol d'un lien contenu dans ce paragraphe, une tooltip devrait apparaître.

Au survol du lien contenu dans ce paragraphe, une seconde tooltip devrait apparaître.

Il est possible d'activer la tooltip au clic.

Il est possible de retarder la disparition de la tooltip.

## Fonctionnement

Le lien qui fera apparaître l'élément au survol doit pointer vers son id :

    <a href="#ma_tooltip">Lien</a>
    <div id="ma_tooltip">Tooltip</div>

Il est ainsi possible de faire pointer plusieurs liens vers un même élément, donc de faire apparaître la même tooltip plusieurs fois sans dupliquer le code, puisqu'elle va simplement se déplacer sur la page :

    <a href="#ma_tooltip">Lien 1</a>
    <a href="#ma_tooltip">Lien 2</a>
    <div id="ma_tooltip">Tooltip</div>

Si l'utilisateur n'utilise pas Javascript, alors le lien interne fonctionnera normalement et il verra la tooltip. Dans le cas inverse, il ne pourra pas cliquer sur le lien, mais celui-ci lui affichera la tooltip au survol.

## Téléchargement

Le poids de la version compressée de jQuery Simple Tooltip est de 1,1Ko si la compression GZip est utilisée, et 2,5Ko sans.

Télécharger jQuery Simple Tooltip 0.9.1 (zip)

## Contribuer

Vous souhaitez participer ? N'hésitez pas à vous rendre sur la page du projet Github pour contribuer au code : http://github.com/bpierre/jquery-simple-tooltip/.

Vous pouvez également me contacter à l'adresse suivante : pierrebertet@gmail.com

## Utilisation

Il suffit de cibler avec jQuery tous les liens pointant vers une tooltip et d'exécuter la méthode `simpletooltip()`, par exemple pour cette page :

    // simpletooltip renvoie l'objet précédemment sélectionné, selon la convention jQuery.
    $("a").simpletooltip();

Pour ajouter un bouton permettant de fermer la tooltip au clic, il faut placer un lien pointant vers une ancre (idéalement, cette ancre permet de revenir au niveau du lien), et possédant un attribut rel="close".

    <a href="#..." rel="close">Fermer la tooltip<a>

Il est possible de passer des options à la méthode simpletooltip, sous la forme d'un tableau associatif :

- margin permet de définir l'écart minimal entre le bord de la fenêtre et la tooltip, en pixels. (5 par défaut)
- effect permet de définir l'animation que va utiliser jQuery pour faire apparaître la tooltip (effets intégrés à jQuery - voir documentation).
- click, défini sur true, il permet d'ouvrir la tooltip au clic. (false par défaut)
- delay, en secondes, permet de retarder la disparition de la tooltip au rollout. (0 par défaut)

### margin

    // Ecart de 10 pixels
    $("a").simpletooltip( { margin: 10 } );

Démonstration : tooltip

### showEffect et hideEffect

    // Effet "fadeIn"
    $("a").simpletooltip( { showEffect: "fadeIn", hideEffect: "fadeOut" } );

Démonstration : tooltip

    // Effet "slideDown"
    $("a").simpletooltip( { showEffect: "slideDown", hideEffect: "slideUp" } );

Démonstration : tooltip

    // Effet "show"
    $("a").simpletooltip( { showEffect: "show", hideEffect: "hide" } );

Démonstration : tooltip

### click

    // Au clic
    $("a").simpletooltip( { click: true } );

Démonstration : tooltip

### hideDelay

    // Retarder la disparition
    $("a").simpletooltip( { hideDelay: 0.5 } );

Démonstration : tooltip

### hideOnLeave

    // Ne pas cacher la tooltip lorsque le curseur quitte la tooltip
    $("a").simpletooltip( { click: true, hideOnLeave: false } );

Démonstration : tooltip

### showCallback

    // Exécuter une fonction lorsque la tooltip s'affiche
    $("a").simpletooltip({
    	callback: function(tooltip){
    		window.alert('Callback : affichage de la tooltip #'+tooltip.id);
    	}
    });

Démonstration : tooltip

### customTooltip

    // Permet de générer dynamiquement une tooltip
    $("a").simpletooltip({
    	customTooltip: function(target){
    		return '<p> vous avez survolé le lien suivant : "'+ $(target).text() +'" </p>';
    	}
    });

Démonstration : tooltip (il n'est pas obligatoire de passer par un lien pour une tooltip dynamique).

## Tooltip 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

## Tooltip 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

## Tooltip 3

Fermer la tooltip au clic ?

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.