Javascript Girl
  1. Javascript Girl
  3. Astuce de l'outil jQuery sur le vol stationnaire
Intereting Posts
Comme dans Javascript n'est pas chargé dans dom dans jquery mobile Est-il possible de passer des variables non déclarées en tant que paramètres en Javascript? Quelle est la différence entre cancelBubble et stopPropagation? Comment faire le problème suivant d'entrée de masque? Encadrage des cours CSS dans IE6 – Essayer de trouver une solution jQuery? Processing.js loading external files L'élément déclenche-t-il un événement onclick dans jquery? Vérification d'une valeur variable à l'aide d'un opérateur OU Sélectionner / options ng-model n'est pas lié avec ng-selected Détecter cliquez sur l'élément externe? Php javascript japp applet signature de la carte à puce pdf sur le serveur Remplacement du caractère newline en javascript Effacez la couche WMS avant de redessiner sur OpenLayers Cartes Google Places API V3 autocomplete – sélectionnez la première option sur enter (et faites-le rester de cette façon) Supprimer les valeurs par défaut d'un objet

Astuce de l'outil jQuery sur le vol stationnaire

J'ai besoin d'une info-bulle très légère semblable à la 1 trouvée ici http://www.history.com/videos lorsque vous déplacez un lien vidéo sous "Vidéos populaires", une info-bulle s'efface, elle reste là et vous pouvez Sélectionnez même le texte jusqu'à ce que vous déplacez le curseur. Facebook et Google+ possèdent également un outil similaire à celui d'un outil de style ainsi que stackoverflow lorsque vous passez sur une balise. Quelqu'un peut-il fournir une méthode légère pour ce faire?

J'ai cherché et j'ai examiné plusieurs «plugins» existants. Ils sont tous un peu bloqués. Merci pour toute aide

Voici une façon très simple d'accomplir ceci: 

var timeout; function hide() { timeout = setTimeout(function () { $("#tooltip").hide('fast'); }, 500); }; $("#tip").mouseover(function () { clearTimeout(timeout); $("#tooltip").stop().show('fast'); }).mouseout(hide); $("#tooltip").mouseover(function () { clearTimeout(timeout); }).mouseout(hide);

Où #tip est l'élément sur #tip vous souhaitez passer la souris pour faire apparaître l'info-bulle, et #tooltip est l'élément d'info-bulle réel.

Voici un exemple: http://jsfiddle.net/pvyhY/

Si vous vouliez l'envelopper dans un plugin jQuery: 

 (function($) { $.fn.tooltip = function(tooltipEl) { var $tooltipEl = $(tooltipEl); return this.each(function() { var $this = $(this); var hide = function () { var timeout = setTimeout(function () { $tooltipEl.hide(); }, 500); $this.data("tooltip.timeout", timeout); }; /* Bind an event handler to 'hover' (mouseover/mouseout): */ $this.hover(function () { clearTimeout($this.data("tooltip.timeout")); $tooltipEl.show(); }, hide); /* If the user is hovering over the tooltip div, cancel the timeout: */ $tooltipEl.hover(function () { clearTimeout($this.data("tooltip.timeout")); }, hide); }); }; })(jQuery);

Usage: 

 $(document).ready(function() { $("#tip").tooltip("#tooltip"); });

Ajoutez plus de fonctionnalités et vous finirez par terminer avec l'excellent plugin qTip , que je recommande également de regarder.

Voici une autre info-bulle sur Facebook en utilisant un plugin JQuery appelé Tiptip. Le lien ci-dessous est un exemple de travail complet. Un lien de téléchargement Tiptip est également fourni dans le lien ci-dessous.

http://kahimyang.info/kauswagan/HowtoBlogs.xhtml?b=527

Il a été écrit pour le public de JSF / PrimeFaces. Remplacez simplement les références à "JQuery" par "$". Cela utilise comment construit PrimeFaces JQuery. Pour les utilisateurs non PrimeFaces, vous devez charger JQuery avant le tiptip.