jQuery qTip: Wie füge ich ein einzelnes Tooltip-Div an mehrere Ziel-Divs an?

Das normale Verhalten des jQuery-Plugins qTip besteht darin, für jedes zugewiesene Tooltipp-Element ein neues verstecktes Div zu erstellen. Gibt es eine Möglichkeit, ein einzelnes verstecktes Tooltip-Element mit mehreren Zielen zu verknüpfen, um zu vermeiden, dass das DOM unübersichtlich wird?jQuery qTip: Wie füge ich ein einzelnes Tooltip-Div an mehrere Ziel-Divs an?

konstruiertes Beispiel:

<div id="foo1"></div> 
<div id="foo2"></div> 

<script> $("#foo1,#foo2").qTip({"content":"test"}); </script> 

<!-- Creates two elements, rather than one: --> 
<div class="qtip" style="display:none;">test</div> 
<div class="qtip" style="display:none;">test</div>

Wenn QTIP ist nicht in der Lage, dies zu tun, kann jeder anderen jQuery-basierten Tooltip Plugin empfehlen, die nur einen einzigen Tooltip Container mit Rich-HTML unterstützt? Vielen Dank!

Quelle

2010-01-04 Luke Dennis

Sie können QTip-Boxen dynamisch erstellen.

Html:

<a id="some-link" href="#">Show a qTip</a> 
<div id="hidden-element" style="display:none"></div>

Javascript:

$('#some-link').click(function() { 
    $('#hidden-element').qtip({ 
     content: { 
      text: '<div>Insert content here</div>', 
      prerender: true //as of beta3, this option is false by default 
     }, 
     // etc, etc 
    }); 

    qtip = jQuery('#hidden-element').qtip('api'); 
    qtip.show(); 

    return false; 
});

Siehe http://craigsworks.com/projects/qtip/docs/api Einzelheiten über die QTIP API

EDIT: 22. Juni 2011 (justgrumpy) - As of beta3 the qtip does not prerender by default. 'prerender' muss in der Inhaltsoption auf 'true' gesetzt sein, damit der qtip dynamisch angezeigt wird.

Quelle

2010-01-10 12:17:00

Ich bin ein Fan der jQuery Tools Tooltip. Sie können Ihre eigene QuickInfo-Struktur im HTML-Code definieren, und Sie können diese QuickInfo auf beliebig viele Elemente anwenden.

Quelle

2010-01-04 00:54:19 zombat

Verwenden Sie den Klassenselektor anstelle von kommagetrennten Elementlisten. Hier ist ein Beispiel:

$('.selectorClass').qTip({arguments:here});

Ich habe dies nicht getestet, aber es sollte gut funktionieren.

Quelle

2010-01-05 17:40:15

Dies ist falsch; Die Auswahl nach ID (z. B. $ ('# ID1, # ID2')) ist viel schneller als die Auswahl nach Klassen. Um mit $ ('.selectorClass') übereinzustimmen, wird der gesamte DOM-Baum für die Seite analysiert, während, um den IDs zu entsprechen, zwei Nachschlagevorgänge mit dem getElementById-Aufruf durchgeführt werden. –

Ich stimme nicht mit 'El Yobo' überein, da diese Antwort perfekt für mich funktioniert. Die Frage hängt nicht mit der Geschwindigkeit zusammen. Es bezieht sich auf das, was am einfachsten ist. – kingchris

Es ist offensichtlich, dass die Auswahl nach ID ist viel schneller als die Auswahl nach CSS-Klasse. Aber dieses Leistungsproblem bezog sich nur auf die Version von Internet Explorer bis Version 9. IE-Browser, die mit Version 9 beginnen, sind seit vielen Jahren fast so gut wie Chrome, Firefox, Opera usw. Leider gibt es das Problem immer noch in großen Unternehmen, wo sie Internet Explorer 8 verwenden. Ich spreche nicht über IE7 oder IE6. Die Auswahl nach CSS-Klasse ist also sehr schnell mit modernen Browsern. –

Ich habe herausgefunden, wie man Tooltip div haben von vielen Tooltip Bilder geteilt werden, wenn jemand praktisch findet es

$(".tooltipBearing").qtip({ 
          content: { 
           text: $("#tooltipDiv").html() 
          }   
         });

Wenn Sie die .html setzen fail() dort auf, werden Sie Die freigegebene QuickInfo wird einmal angezeigt. Wenn sie dann von einem anderen Bild aus aktiviert wird, funktioniert sie nicht mehr für die erste ...

Die tooltipBearing ist eine Klasse, die für einige Bilder auf der Seite festgelegt wurde.

tooltipDiv ist die ID des div mit Ihrem Tooltip-Inhalt.

Quelle

2013-08-13 19:46:27 user738048

jQuery qTip: Wie füge ich ein einzelnes Tooltip-Div an mehrere Ziel-Divs an?

Antwort

Verwandte Themen