Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [jQuery]ToolTip
Forum PHP.pl > Forum > Przedszkole
MateuszS
Hey, mam prosty na pozór problem z tooltipem w jQuery. Chcę aby po wciśnięciu w jakiś np. tekst pojawił się tooltip z divem, którego mam zapisanego w zmiennej JS.

Ten div jest zapisany w zmiennej JS
  1. <div id="tooltip">
  2. asdasdasdasdasdaad
  3. </div>


  1. .tooltip
  2. {
  3. border: 1px solid $input_border_color;
  4. width: 80px;
  5. height: 200px;
  6. color: white;
  7. }


  1. $('#tooltip').tooltip(); //nie działa ze zrozumiałych względów, bo kod HTML w zmiennej jest niewidoczny dla DOM. Ale nie mam innych pomysłów.
MateuszS
Mam taki tooltip:

[JAVASCRIPT] pobierz, plaintext
  1. $('#character-avatar-clickable').attr('title','not').tooltip({
  2. content: function() { return data.tooltip.html; },
  3. show: { effect: 'fast' },
  4. hide: { effect: 'fast' },
  5. position: { my: "left+10 center", at: "right center" }
  6. })
  7. .off( 'mouseover' )
  8. .on( 'click', function(){
  9.  
  10. if( $( this ).data( "tooltip" ) ) {
  11. $( this ).tooltip( 'close' );
  12. $( this ).data( "tooltip", false );
  13.  
  14.  
  15. } else {
  16. $( this ).tooltip( 'open' );
  17. $( this ).data( "tooltip", true );
  18.  
  19.  
  20. }
  21.  
  22. $( this ).off( 'mouseleave' );
  23. });
[JAVASCRIPT] pobierz, plaintext


Jest jakaś alternatywna metoda sprawienia żeby tooltip otwierał i zamykał się kliknięciem w diva '#character-avatar-clickable' ? Teraz przed powyższym kodem żeby można było otworzyć tooltipa muszę dać

[JAVASCRIPT] pobierz, plaintext
  1. $('#character-avatar-clickable').click();
[JAVASCRIPT] pobierz, plaintext


w przeciwnym razie muszę klikać dwukrotnie żeby tooltip się otworzył i zamknął (nie wiem czemu)


### W przypadku gdyby ktoś nie zrozumiał o co mi chodzi ###
Tooltip otwiera się za co drugim wciśnięciem co nie powinno się zdarzać (co jeden klik powinien się włączać i wyłączać). Dobrze to ilustruje poniższy przykład (wykastrowany)
[JAVASCRIPT] pobierz, plaintext
  1. $('#character-avatar-clickable').attr('title','not').tooltip({
  2. content: function() { return data.tooltip.html; },
  3. show: { effect: 'fast' },
  4. hide: { effect: 'fast' },
  5. position: { my: "left+10 center", at: "right center" }
  6. }).off('mouseover');
  7.  
  8. $('#character-avatar-clickable').click( function() {
  9. $( '#character-avatar-clickable' ).tooltip( 'open' );
  10. });
[JAVASCRIPT] pobierz, plaintext
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.