jQueryUI tooltip Widget per mostrare tooltip su Clicca

Question

Come widget di tooltip del nuovo jQueryUI può essere modificato per aprire il tooltip su evento click su certo elemento è il documento, mentre gli altri stanno ancora mostrando la loro tootip su evento mouseover. Nel caso di click-open il tooltip dovrebbe essere chiuso cliccando altrove sul documento.

È possibile?

Answer 1

jsfiddle http://jsfiddle.net/bh4ctmuj/225/

Questo può aiutare.

<!-- HTML --> 
     <a href="#" title="Link Detail in Tooltip">Click me to see Tooltip</a>  
<!-- Jquery code--> 

    $('a').tooltip({   
    disabled: true, 
    close: function(event, ui) { $(this).tooltip('disable'); } 
    }); 

    $('a').on('click', function() { 
    $(this).tooltip('enable').tooltip('open'); 
    }); 

Answer 2

La risposta precedente non utilizza jqueryui ed è piuttosto complessa.

Questo funziona:

HTML:

<div id="tt" >Test</div> 

JS:

$('#tt').on({ 
    "click": function() { 
    $(this).tooltip({ items: "#tt", content: "Displaying on click"}); 
    $(this).tooltip("open"); 
    }, 
    "mouseout": function() {  
    $(this).tooltip("disable"); 
    } 
}); 

Si può controllare usando http://jsfiddle.net/adamovic/A44EB/

Answer 3

Ho giocato con questo problema oggi, Ho pensato di condividere i miei risultati ...

Utilizzando l'esempio da jQueryUI tooltip, styling personalizzato e contenuti personalizzati

volevo avere un ibrido di questi due. Volevo essere in grado di avere un popover e non un tooltip, e il contenuto doveva essere HTML personalizzato. Quindi nessuno stato di passaggio del mouse, ma invece uno stato di clic.

mio JS è come questo:

 $(function() { 
     $(document).tooltip({ 
      items: "input", 
      content: function() { 
       return $('.myPopover').html(); 
      }, 
      position: { 
       my: "center bottom-20", 
       at: "center top", 
       using: function(position, feedback) { 
        $(this).css(position); 
        $("<div>") 
          .addClass("arrow") 
          .addClass(feedback.vertical) 
          .addClass(feedback.horizontal) 
          .appendTo(this); 
       } 
      } 
     }); 

     $('.fireTip').click(function() { 
      if(!$(this).hasClass('open')) { 
       $('#age').trigger('mouseover'); 
       $(this).addClass('open'); 
      } else { 
       $('#age').trigger('mouseout'); 
       $(this).removeClass('open'); 
      } 

     }) 

    }); 

La prima parte è più o meno una copia diretta del codice di esempio dal sito UI con l'aggiunta di oggetti e contenuti nel blocco tooltip.

mio HTML:

<p> 
     <input class='hidden' id="age" /> 
     <a href=# class="fireTip">Click me ya bastard</a> 
    </p> 

    <div class="myPopover hidden"> 
     <h3>Hi Sten this is the div</h3> 
    </div> 

Bacially abbiamo ingannare stato hover quando si clicca il tag di ancoraggio (classe fireTip), il tag input che contiene la descrizione comando ha invocato uno stato mouseover, sparando in tal modo il tooltip e conservazione in su finché si vuole ... la CSS è sul violino ...

in ogni modo, qui è un violino per vedere l'interazione un po 'meglio: http://jsfiddle.net/AK7pv/

Answer 4

Questa risposta si basa sul lavoro con diffe lezioni di affitto. Quando l'evento click si svolge su un elemento con classe 'trigger' la classe è cambiato in 'grilletto' e l'evento MouseEnter viene attivato al fine di trasmetterla ai jQuery UI.

Il mouseOut viene annullato in questo esempio per rendere il tutto sulla base di eventi click.

HTML

<p> 
<input id="input_box1" /> 
<button id="trigger1" class="trigger" data-tooltip-id="1" title="bla bla 1"> 
?</button> 
</p> 
<p> 
<input id="input_box2" /> 
<button id="trigger2" class="trigger" data-tooltip-id="2" title="bla bla 2"> 
?</button> 
</p> 

jQuery

$(document).ready(function(){ 
$(function() { 
//show 
$(document).on('click', '.trigger', function() { 
    $(this).addClass("on"); 
    $(this).tooltip({ 
     items: '.trigger.on', 
     position: { 
      my: "left+15 center", 
      at: "right center", 
      collision: "flip" 
     } 
    }); 
    $(this).trigger('mouseenter'); 
}); 
//hide 
$(document).on('click', '.trigger.on', function() { 
    $(this).tooltip('close'); 
    $(this).removeClass("on") 
}); 
//prevent mouseout and other related events from firing their handlers 
$(".trigger").on('mouseout', function (e) { 
    e.stopImmediatePropagation(); 
}); 
}) 
}) 

http://jsfiddle.net/AK7pv/111/

Answer 5

Questa versione assicura il tooltip rimane visibile abbastanza a lungo per all'utente di spostare il mouse sopra tooltip e rimane visibile fino mouseout. Comodo per consentire all'utente di selezionare del testo dal suggerimento.

$(document).on("click", ".tooltip", function() { 
    $(this).tooltip(
     { 
      items: ".tooltip", 
      content: function(){ 
       return $(this).data('description'); 
      }, 
      close: function(event, ui) { 
       var me = this; 
       ui.tooltip.hover(
        function() { 
         $(this).stop(true).fadeTo(400, 1); 
        }, 
        function() { 
         $(this).fadeOut("400", function(){ 
          $(this).remove(); 
         }); 
        } 
       ); 
       ui.tooltip.on("remove", function(){ 
        $(me).tooltip("destroy"); 
       }); 
      }, 
     } 
    ); 
    $(this).tooltip("open"); 
}); 

HTML

<a href="#" class="tooltip" data-description="That&apos;s what this widget is">Test</a> 

Esempio: http://jsfiddle.net/A44EB/123/

Answer 6

Questo codice crea un tooltip che rimane aperto fino a quando si fa clic al di fuori del tooltip. Funziona anche dopo aver eliminato il suggerimento. È un'elaborazione di Mladen Adamovic's answer.

Fiddle: http://jsfiddle.net/c6wa4un8/57/

Codice:

var id = "#tt"; 
var $elem = $(id); 

$elem.on("mouseenter", function (e) { 
    e.stopImmediatePropagation(); 
}); 

$elem.tooltip({ items: id, content: "Displaying on click"}); 

$elem.on("click", function (e) { 
    $elem.tooltip("open"); 
}); 


$elem.on("mouseleave", function (e) { 
    e.stopImmediatePropagation(); 
}); 


$(document).mouseup(function (e) { 
    var container = $(".ui-tooltip"); 
    if (! container.is(e.target) && 
     container.has(e.target).length === 0) 
    { 
     $elem.tooltip("close"); 
    } 
}); 

Answer 7

Aggiornamento Mladen Adamovic risposta ha uno svantaggio. Funziona solo una volta. Quindi tooltip è disabilitato. Per farlo funzionare ogni volta il codice dovrebbe essere integrato con lo strumento di abilitazione tip on click.

$('#tt').on({ 
    "click": function() { 
    $(this).tooltip({ items: "#tt", content: "Displaying on click"}); 
    $(this).tooltip("enable"); // this line added 
    $(this).tooltip("open"); 
    }, 
    "mouseout": function() {  
    $(this).tooltip("disable"); 
    } 
});