jQueryUI tooltip-Widget, um zu zeigen, tooltip Klicken

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

Dies kann helfen.

<!-- 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');
   });

InformationsquelleAutor Garry

Dieser code erstellt ein tooltip, der bleibt geöffnet, bis Sie auf eine Stelle außerhalb der tooltip. Es funktioniert, auch nachdem Sie schließen Sie die QuickInfo. Es ist eine Ausarbeitung von Mladen Adamovic Antwort.

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

Code:

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");
    }
});

InformationsquelleAutor Marco Sulla

Zocke ich mit dieser Frage heute, ich dachte, ich würde teilen meine Ergebnisse...

Am Beispiel von jQueryUI tooltip, benutzerdefinierte Stile und benutzerdefinierte Inhalte

Ich wollte ein hybrid dieser beiden. Ich wollte in der Lage sein, um ein popover und nicht ein tooltip, und die Inhalte, die benötigt werden, um benutzerdefinierte HTML. Also kein hover-Zustand, sondern stattdessen ein klicken Sie auf Status.

Mein JS sieht so aus:

       $(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');
            }

        })

    });

Der erste Teil ist mehr oder weniger eine direkte Kopie von dem code-Beispiel von UI-Website mit dem Zusatz von Elementen und Inhalten im tooltip block.

Mein 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 wir überlisten den hover-Zustand, wenn wir auf das Anker-tag (fireTip-Klasse), das input-tag, der hält, was der tooltip ist ein mouseover-Zustand aufgerufen, so feuern die QuickInfo und halten Sie es so lange, wie wir wollen... Das CSS ist auf die Geige...

Anyways, hier ist ein Turnschuh, um zu sehen, das zusammenspiel ein wenig besser:
http://jsfiddle.net/AK7pv/

InformationsquelleAutor Sten Muchow

Diese version sorgt der tooltip bleibt sichtbar, die lange genug für den Benutzer zu bewegen der Maus über ein tooltip und bleibt sichtbar, bis mouseout. Praktisch für die dem Benutzer ermöglicht, wählen Sie den text von tooltip.

$(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>

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

InformationsquelleAutor user2438271