Créer des tooltips avec Powertip

Powertip est un plugin JQuery qui permet de faire des tooltips. La dernière mise à jour date du 8 août 2012, autant dire que le créateur continu de l’améliorer.

L’avantage de ce plugin par rapport à d’autre est la notion de « smart placement » (placement intélligent) qui permet de placer les tooltips de manière à ce que les tooltips ne dépassent pas de la page.

Voici ce qui peut arriver sans le smart placement :

Et la correction que ce système fait :

Pour mettre ce système en place il suffit de définir l’ordre des préférences des positions pour la tooltip

$.fn.powerTip.smartPlacementLists = {
	n: ['n', 'ne', 'nw', 's'],
	e: ['e', 'ne', 'se', 'w', 'nw', 'sw', 'n', 's', 'e'],
	s: ['s', 'se', 'sw', 'n'],
	w: ['w', 'nw', 'sw', 'e', 'ne', 'se', 'n', 's', 'w'],
	nw: ['nw', 'w', 'sw', 'n', 's', 'se', 'nw'],
	ne: ['ne', 'e', 'se', 'n', 's', 'sw', 'ne'],
	sw: ['sw', 'w', 'nw', 's', 'n', 'ne', 'sw'],
	se: ['se', 'e', 'ne', 's', 'n', 'nw', 'se']
};

C’est la configuration qui est proposée sur le site officiel du plugin.

Et voici un exemple d’utilisation du plugin :

<a class="powertip" href="monsuperlien" title="Le contenu de ma tooltip">Un lien</a>
<script>
$(function(){
    $('.powertip').powerTip({
	placement: 'n',
	smartPlacement: true
    });
});
</script>

Pour des besoins plus compliqué vous pouvez ajouter des traitements sur différents events :

$('.tips').on({
	powerTipPreRender: function() {
		console.log('powerTipRender', this);

		// generate some dynamic content
		$(this).data('data-powertip' , '<h3 class="title">Default title</h3><p>Default content</p>');
	},
	powerTipRender: function() {
		console.log('powerTipRender', this);

		// change some content dynamically
		$('#powerTip').find('.title').text('This is a dynamic title.').
	},
	powerTipOpen: function() {
		console.log('powerTipOpen', this);

		// animate something when the tooltip opens
		$('#powerTip').find('.title').animate({ opacity: .1 }, 1000).animate({ opacity: 1 }, 1000);
	},
	powerTipClose: function() {
		console.log('powerTipClose', this);

		// cleanup the animation
		$('#powerTip').find('.title').stop(true, true);
	}
});

Et enfin un petit exemple :

Site officiel ou Télécharger