web-dev-qa-db-fra.com

jquery ui tooltip manuel ouvrir/fermer

y at-il un moyen d'ouvrir manuellement fermer l'info-bulle jquery ui? Je veux juste qu'il réagisse à un événement clic activé/désactivé. Vous pouvez dissocier tous les événements de la souris et il les reliera lors de l'appel de .tooltip ('open'), même si cela ne devrait pas initialiser ou définir d'événements imo, car si vous essayez d'exécuter .tooltip ('open') sans initialisation, fort de ne pas être initialisé.

jquery-uitooltip
19
Funkodebat

jltwoo, puis-je suggérer d'utiliser deux commutateurs booléens différents pour permettre l'ouverture et la fermeture automatiques? Avec ce changement, votre code ressemblera à ceci:

(function( $ ) {
  $.widget( "custom.tooltipX", $.ui.tooltip, {
    options: {
        autoShow: true,
        autoHide: true
    },

    _create: function() {
      this._super();
      if(!this.options.autoShow){
        this._off(this.element, "mouseover focusin");
      }
    },

    _open: function( event, target, content ) {
      this._superApply(arguments);

      if(!this.options.autoHide){
        this._off(target, "mouseleave focusout");
      }
    }
  });

}( jQuery ) );

De cette façon, initialiser l'info-bulle comme:

$(someDOM).tooltipX({ autoHide:false });

il apparaît tout seul lorsque la souris survole l'élément, mais vous devez le fermer manuellement.

Si vous souhaitez contrôler manuellement les actions d'ouverture et de fermeture, vous pouvez simplement utiliser:

$(someDOM).tooltipX({ autoShow:false, autoHide:false });
12
MscG

Si vous souhaitez simplement dissocier les événements et que vous ne souhaitez pas créer votre propre info-bulle personnalisée.

$("#some-id").tooltip(tooltip_settings)
             .on('mouseout focusout', function(event) {
                  event.stopImmediatePropagation();
             });

$("#some-id").attr("title", "Message");
$("#some-id").tooltip("open");

mouseout bloque la disparition de la barre d'outils en déplaçant le curseur de la souris

focusout bloque la disparition de la barre d'outils par la navigation au clavier

10
Felix

L'info-bulle a une option de désactivation. Eh bien, je l'ai utilisé et voici le code:

$('a').tooltip({
    disabled: true    
}).click(function(){    
    if($(this).tooltip('option', 'disabled'))
        $(this).tooltip('option', {disabled: false}).tooltip('open');
    else
        $(this).tooltip('option', {disabled: true}).tooltip('close');
}).hover(function(){
    $(this).tooltip('option', {disabled: true}).tooltip('close');
}, function(){
    $(this).tooltip('option', {disabled: true}).tooltip('close');
});
7
jd_7

En rapport avec mon autre commentaire, j'ai examiné le code d'origine et obtenu une ouverture/fermeture manuelle en étendant le widget et en ajoutant une option autoHide avec la version JQuery-UI v1.10.3. En gros, je supprime simplement les écouteurs de souris ajoutés à _create et l'appel interne _open. 

Edit: autoHide et autoShow séparés sous la forme de deux indicateurs distincts, comme le suggère @MscG.

Démo ici:http://jsfiddle.net/BfSz3/

(function( $ ) {
  $.widget( "custom.tooltipX", $.ui.tooltip, {
    options: {
      autoHide:true,
      autoShow: true
    },

    _create: function() {
      this._super();
      if(!this.options.autoShow){
        this._off(this.element, "mouseover focusin");
      }
    },

    _open: function( event, target, content ) {
      this._superApply(arguments);

      if(!this.options.autoHide){
        this._off(target, "mouseleave focusout");
      }
    }
  });

}( jQuery ) );

Désormais, lorsque vous initialisez, vous pouvez définir l’infobulle de manière à ce qu’elle soit affichée ou masquée manuellement en définissant autoHide: false:

 $(someDOM).tooltipX({ autoHide:false });

Et passez directement des appels standard d'ouverture/fermeture dans votre code, selon vos besoins, ailleurs

 $(someDOM).tooltipX("open"); // displays tooltip
 $(someDOM).tooltipX("close"); // closes tooltip

Un simple correctif, jusqu’à ce que j’ai le temps de faire une demande officielle de tirage, cela devra être fait.

5
jltwoo

Une compilation de questions SO. 

Exemple Afficher l'info-bulle en cliquant sur hint et masquer l'info-bulle en cliquant sur les autres

$(document).on('click', '.hint', function(){ //init new tooltip on click
   $(this).tooltip({
      position: { my: 'left+15 center', at: 'center right' },
      show: false,
      hide: false
   }).tooltip('open'); // show new tooltip
}).on('click', function(event){ // click everywhere
   if(!$(event.target).hasClass('hint'))
     $(".hint").each(function(){
        var $element = $(this);
        if($element.data('ui-tooltip')) { // remove tooltip only from initialized elements
           $element.tooltip('destroy');
        }
     })
});

$('.hint').on('mouseout focusout', function(event) { // prevent auto hide tooltip 
    event.stopImmediatePropagation();
});
0
aleha