Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: jquery tooltip nie dziala
Forum PHP.pl > Forum > Po stronie przeglądarki
misty
7.11.2011, 14:58:26
czesc,
potrzebuje jakiegos prostego, lekkiego tooltipa w jquery. na necie jest pelno tego, wybralam simpletip:
http://craigsworks.com/projects/simpletip/

Wydaje sie byc banalne, ale za cholere nie dziala! Oto moj kod:

[PHP] pobierz, plaintext 
  1. <html>
  2. <head>
  3. 	<link rel="stylesheet" type="text/css" href="css/simpletip.css" />
  4. 	<link rel="stylesheet" type="text/css" href="css/code.css" />
  5. 	<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
  6. 	<script src="js/jquery.simpletip-1.3.1.min.js" type="text/javascript"></script>
  7.  
  8. </head>
  9. <body>
  10. <div class="">
  11. <input type="input" id="test" name="test" value="test" title="super test" />
  12. </div>
  13.  
  14. </body>
  15. </html>
  16. 	<script>
  17.  
  18. 	/*$('test').each(function() {
  19. 	    $(this).simpletip({
  20. 	        content : $(this).attr('title')
  21. 	    });
  22. 	});*/
  23.  
  24. /*	
  25. Probowalam tez tak:
  26. 	/*$('input[title]').each(function() {
  27. 	    $(this).simpletip({
  28. 	        content : $(this).attr('title')
  29. 	    });
  30. 	});*/
  31. */
  32.  
[PHP] pobierz, plaintext


no i nie dziala. Czy ktos z Was moze tego uzywal? i wie co jest nie tak? albo moze mi polecic cos, z przykladem? tak wiem ze jest masa przykladow, ktore jak odpalam-to dzialaja, ale jak tylko probuje dolaczyc do projektu (co sie wiaze ze zmiana sciezek dla js i css to przestaja dzialac!)

Bede bardzo wdzieczna za wszelka pomoc,
pzdr,
misty
mortus
7.11.2011, 17:11:16
Ten skrypt nie nadaje się do elementów input. Podpowiedź nie jest wyświetlana ponieważ skrypt generuje HTML, który nie ma prawa bytu, a wygląda on tak:
[HTML] pobierz, plaintext 
  1. <input type="text" title="super test" value="test" name="test" id="test"><div class="tooltip" style="display: none;">tip</div></input>
[HTML] pobierz, plaintext

Zauważ, że autor skryptu w przykładach używa go dla zwykłego tekstu opatrzonego znacznikami <a>, <span>, itp.
misty
8.11.2011, 07:30:37
hej,
przede wszystkim-dzieki za odpowiedz! poszlam za Twoja rada i uzylam elementu 'a' no i nadal nic. strona html:

[PHP] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <link rel="stylesheet" type="text/css" href="css/tooltip.css" />
  4. 	<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
  5. 	<script src="js/jquery.simpletip-1.3.1.min.js" type="text/javascript"></script>
  6.  
  7. </head>
  8. <body>
  9. <div class="tooltip">
  10. <a name="test"  id="test" title="super test">test lalalaa </a>
  11. </div>
  12.  
  13. </body>
  14. </html>
  15. 	<script>
  16.  
  17. 	$('test').each(function() {
  18. 	    $(this).simpletip({
  19. 	        content : $(this).attr('title'),
  20. 	    });
  21. 	});
  22. </script>
[PHP] pobierz, plaintext


autor umiescil u siebie na strone w dziale 'documentation' ze nalezy dodac css:

[PHP] pobierz, plaintext 
  1. /* CSS rules */
  2. //
  3. Default tooltip class name: .tooltip 
  4. .tooltip {
  5. 	position: absolute;
  6. 	top: 0;
  7. 	left: 0;
  8. 	z-index: 3;
  9. 	display: none;
  10. }
[PHP] pobierz, plaintext


no wiec to zrobilam i dalam div'a z class tooltip. no i nadal nic. nie kapuje tego zupelnie!! tzn tolltip sie pokazuje, ale tak jak sie normalnie pokazuje atrubut 'title'. czyli przyklad mi nadal nie dziala.
mortus
8.11.2011, 08:44:11
Selektor $('test') służyłby do wybrania elementu <test></test>, gdyby taki element HTML istniał. Dostęp do Twojego elementu <a> uzyskujesz za pomocą selektora $('#test') (tutaj wykorzystujesz id) lub $('a[name="test"]') (tu z kolei wykorzystujesz atrybut name o wartości test). Poza tym umieść skrypt przed znacznikiem </body>, bo w tej chwili znajduje się w nieodpowiednim miejscu, de facto poza całą strukturą dokumentu HTML.

edit: Jeśli chodzi o styl CSS to przede wszystkim musisz zmienić nazwę klasy div-a, w którym znajduje się ten odnośnik z podpowiedzią. W tej chwili występuje konflikt, bo i ten div, i podpowiedź mają taką samą klasę (tooltip). Na potrzeby tego testu możesz usunąć w ogóle klasę elementu div. Styl, który wskazał autor nie za bardzo nadaje się do wykorzystania w Twoim przypadku, bo tekst nie jest w żaden sposób wyróżniony przez co podpowiedź nachodzi na tekst w odnośniku. Zastosuj np. coś takiego:
[CSS] pobierz, plaintext 
  1. .tooltip {
  2.  border: 1px solid #eee;
  3.  background-color: #333;
  4.  position: absolute;
  5.  top: 0;
  6.  left: 0;
  7.  z-index: 3;
  8.  display: none;
  9. }
[CSS] pobierz, plaintext

Oczywiście styl możesz dopasować do własnych potrzeb.
misty
8.11.2011, 14:47:58
czesc,
dzieki za cierpliwosc smile.gif stosuje sie do Twoich wskazowek, ale nadal mi nie dziala. Kod wydaje sie byc mega prosty i totalnie nie mam pomyslu co moze byc nie tak:

[PHP] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <link rel="stylesheet" type="text/css" href="css/tooltip.css" />
  4. 	<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
  5. 	<script src="js/jquery.simpletip-1.3.1.min.js" type="text/javascript"></script>
  6.  
  7. </head>
  8. <body>
  9.  
  10. 	<script>
  11.  
  12. 	$('#test').each(function() {
  13. 	    $(this).simpletip({
  14. 	        content : $(this).attr('title')
  15. 	    });
  16. 	});
  17. 	</script>
  18.  
  19.  
  20. <a name="test"  id="test" title="super test" >test lalalaa </a>
  21.  
  22. </body>
  23. </html>
[PHP] pobierz, plaintext


no i dodalam (dokladnie kopiuj-wklej wink.gif ) Twoje css. Nadal nie chwyta. Nie kumam juz nic.
mortus
8.11.2011, 15:28:12 
[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <link rel="stylesheet" type="text/css" href="css/tooltip.css" />
  4. 	<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
  5. 	<script src="js/jquery.simpletip-1.3.1.min.js" type="text/javascript"></script>
  6.  
  7. </head>
  8. <body>
  9.  
  10.  
  11. <a name="test"  id="test" title="super test" >test lalalaa </a>
  12. 	<script>
  13.  
  14. 	$('#test').each(function() {
  15. 	    $(this).simpletip({
  16. 	        content : $(this).attr('title')
  17. 	    });
  18. 	});
  19. 	</script>
  20.  
  21. </body>
  22. </html>
[HTML] pobierz, plaintext

A do stylu dodaj jeszcze:
color: #fff;
Kostek.88
9.11.2011, 03:00:08 
[HTML] pobierz, plaintext 
  1. <html>
  2.     <head>
  3.         <link rel="stylesheet" type="text/css" href="css/tooltip.css" />
  4.         <script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
  5.         <script src="js/jquery.simpletip-1.3.1.min.js" type="text/javascript"></script>
  6.         <script type="text/javascript">
  7.         $(function() {
  8.             $('#test').each(function() {
  9.                 $(this).simpletip({
  10.                     content : $(this).attr('title')
  11.                 });
  12.             });
  13.         });
  14.         </script>
  15.     </head>
  16.     <body>
  17.         <a name="test" id="test" title="super test" >test lalalaa </a>
  18.  
  19.     </body>
  20. </html>
[HTML] pobierz, plaintext

Chcialem tylko dodac, ze na poczatku nalezy wstawic $(function() { . Poza tym warto poprzenosic skrypty do sekcji HEAD - po to w koncu jest. Odpalilem, sprawdzilem i dziala smile.gif
misty
9.11.2011, 07:28:16
hej!
dziala faktycznie, ale oprocz tego tooltip'a z jquery, pokazuje mi sie jeszcze zwykly tooltip, tzn title.. da sie to jakos schowac? Probowalam dodac style:

[HTML] pobierz, plaintext 
  1. .tooltip a title{
  2. 	visibility: none;
  3. }
[HTML] pobierz, plaintext


ale to nie pomoglo.

pzdr
Kostek.88
9.11.2011, 21:00:24
Cos takiego:

[PHP] pobierz, plaintext 
  1. $(function() {
  2.  $('.test').each(function() {
  3.   $(this).simpletip({
  4.    content : $(this).attr('title')
  5.   }).attr('title', '');
  6.  });
  7. });
[PHP] pobierz, plaintext


Na koncu podpinasz funkcje, ktora zmienia Ci title na wartosc pusta. Pisane na szybko, mozesz ew. sprobowac poszukac funkcji, ktora eliminuje calkowicie ten parametr, ale chyba nie jest to konieczne.

Poza tym, pewnie zauwazylas, zamienilem #test na .test. Z opisu wynika, ze chcesz miec kilka tego typu linkow, kazdy ma miec tooltip. Zgodnie ze specyfikacja, ID jest unikalne, wiec nie moze sie powtarzac, zostaje uzycie klasy. Malo tego, jestem na 90% pewien, ze mimo specyfikacji, wiele linkow z ID nie bedzie Ci po prostu dzialac.

BTW: Oczywiscie nie zapomnij zmienic w HTML-u id na class tongue.gif
misty
10.11.2011, 07:15:47
dzieki!

pzdr smile.gif
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.