Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> jquery tooltip nie dziala
misty
post
Post #1





Grupa: Zarejestrowani
Postów: 366
Pomógł: 0
Dołączył: 2.01.2007

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 9)
mortus
post
Post #2





Grupa: Zarejestrowani
Postów: 2 178
Pomógł: 596
Dołączył: 25.09.2009
Skąd: Piwniczna-Zdrój

Ostrzeżenie: (0%)
-----

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.
Go to the top of the page
+Quote Post
misty
post
Post #3





Grupa: Zarejestrowani
Postów: 366
Pomógł: 0
Dołączył: 2.01.2007

Ostrzeżenie: (0%)
-----

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.
Go to the top of the page
+Quote Post
mortus
post
Post #4





Grupa: Zarejestrowani
Postów: 2 178
Pomógł: 596
Dołączył: 25.09.2009
Skąd: Piwniczna-Zdrój

Ostrzeżenie: (0%)
-----

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.

Ten post edytował mortus 8.11.2011, 08:58:24
Go to the top of the page
+Quote Post
misty
post
Post #5





Grupa: Zarejestrowani
Postów: 366
Pomógł: 0
Dołączył: 2.01.2007

Ostrzeżenie: (0%)
-----

czesc,
dzieki za cierpliwosc (IMG:style_emoticons/default/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 (IMG:style_emoticons/default/wink.gif) ) Twoje css. Nadal nie chwyta. Nie kumam juz nic.

Ten post edytował misty 8.11.2011, 14:48:33
Go to the top of the page
+Quote Post
mortus
post
Post #6





Grupa: Zarejestrowani
Postów: 2 178
Pomógł: 596
Dołączył: 25.09.2009
Skąd: Piwniczna-Zdrój

Ostrzeżenie: (0%)
----- 

[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;
Go to the top of the page
+Quote Post
Kostek.88
post
Post #7





Grupa: Zarejestrowani
Postów: 376
Pomógł: 47
Dołączył: 23.08.2007
Skąd: Warszawa

Ostrzeżenie: (0%)
----- 

[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 (IMG:style_emoticons/default/smile.gif)
Go to the top of the page
+Quote Post
misty
post
Post #8





Grupa: Zarejestrowani
Postów: 366
Pomógł: 0
Dołączył: 2.01.2007

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
Kostek.88
post
Post #9





Grupa: Zarejestrowani
Postów: 376
Pomógł: 47
Dołączył: 23.08.2007
Skąd: Warszawa

Ostrzeżenie: (0%)
-----

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 (IMG:style_emoticons/default/tongue.gif)

Ten post edytował Kaloryfer 9.11.2011, 21:01:28
Go to the top of the page
+Quote Post
misty
post
Post #10





Grupa: Zarejestrowani
Postów: 366
Pomógł: 0
Dołączył: 2.01.2007

Ostrzeżenie: (0%)
-----

dzieki!

pzdr (IMG:style_emoticons/default/smile.gif)
Go to the top of the page
+Quote Post
« Następny starszy · Po stronie przeglądarki · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 24.08.2025 - 16:08
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn