11484 sujets

JavaScript, DOM et API Web HTML5

[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 Smiley cligne
Modifié par letstry (31 May 2016 - 14:10)
Bonjour,

Ça tombe bien, j'ai créé un script jQuery remplissant approximativement cette fonction (ici il s'agit de survoler des liens, à adapter donc) :
// -----------------------------------------------------------------------------
// @section     Tooltips
// @description Gestion des infobulles
// -----------------------------------------------------------------------------

( 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'infobulle 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).
Modifié par Olivier C (30 May 2016 - 17:01)
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( '&lt;div class="tooltip"&gt;' + title + '&lt;/div&gt;' );
			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 Smiley cligne
Sujet clos
Aller à