[Résolu] Tooltip text qui s'affiche quand on clique ou passe la sour

Bonjour,

J'aimerai avoir un tooltip jquery qui fasse cela: un text qui s'affiche lorsque l'on passe la souris sur un texte, et qui s'affiche egalement au clique.
J'aimerai avoir exactement comme dans le premier exemple de cette page (mais j'aimerai utilisé que le plugin jquery et sans utiliser de bootstrap):
http://www.w3schools.com/bootstrap/bootstrap_tooltip.asp

Je n'ai rien trouvé en cherchant ailleurs (qui fasse les deux à la fois, affichage au passage de la souris et au clic) .
Merci d'avance à vous
Modifié par letstry (31 May 2016 - 14:10)

Olivier C a écrit :
Bonjour,

Ça tombe bien, j'ai créer un script jQuery remplissant approximativement cette fonction (ici il s'agit de survoler des liens, à adapter donc) :

// -----------------------------------------------------------------------------
// @section     Tooltips
// @description Gestion des infobules
// -----------------------------------------------------------------------------

( function( $ ) {
	$( '.addtooltips a' ).each( function() {
		var link = $( this ),
			title = link.attr( 'title' ); // Stockage de tous les titles dans une variable
		link.css( 'position', 'relative' );
		link.on( 'mouseenter', function() {
			if ( title === undefined || title === '' ) return false; // Pas d'infobule si title manquant ou vide
			link.append( '<div class="tooltip">' + title + '</div>' );
			link.attr( 'title', '' ); // Empêche l'affichage des infobulles par défaut en vidant les titles
			var tooltip = $( '.tooltip' );
			tooltip.css({
				'position' : 'absolute',
				'opacity' : '0'
			} );
			tooltip.animate({
				'opacity' : '1'
			}, 500 );
		} );
		link.on( 'mouseout', function() {
			var tooltip = $( '.tooltip' );
			tooltip.fadeOut( 500, function() {
				tooltip.remove();
				link.attr( 'title', title ); // Réinjecter la valeur du title pour l'accessibilité
			} );
		} );
	} );
} )( jQuery );

Une page de démonstration : Tooltips (survolez les liens of course).

ok, je vais regarder cela merci

Salut,

Sinon, tu as cette très bonne lib que j'utilise souvent : http://www.tippedjs.com/

MatthieuR a écrit :
Sinon, tu as cette très bonne lib que j'utilise souvent : http://www.tippedjs.com/

D'autant plus que cette librairie gère les bords de page à ce que je vois, ce que ne fait pas (encore) mon script...