Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Pytanie o tooltipa
Forum PHP.pl > Forum > Po stronie przeglądarki
Lampek
Witam
Mam problem otóż mam zrobioną tabelę w niej mam diva z kodem slidera jquery w którym po najechaniu na dany slajd ma sie wyświetlić tooltip z adresem www. Problem polega na tym, że sam tooltip działa jak potrzeba tzn tak:Klik natomiast działa u mnie to poprost nie tak jak trzeba tzn tak: Klik . Poprostu tak jakby tooltip nie wychodził poza obręb tabeli w której się znajduje. Jest jakiś sposób żeby to ominąć a tooltip wyświetlał się na wierzchu żeby go było widać całego?
Niktoś
Bez kodu trudno cokolwiek powiedzieć, w sekcji head(nagłówku) masz zapewne ustawione overflow:hidden i dlatego tobie ucina tooltipa bo jest on po prostu za duży, ale bez kodu po prostu można tylko zgadywać.
Lampek
No zgadza się mam w css od sldera w którym ma działać te tooltip mam overflow: hidden no ale jest to potrzebne do prawidłowego działania slidera. Ps który kod mam Ci podać jak coś do sprawdzenia?

Ma może ktoś jeszcze jakiś pomysł?
prowseed
skoro tooltip css, to moze po prostu nadac mu jakas duza wartosc z-index?

//EDIT
Heh, najlepiej, to pokaz to on-line?
Zespuł mi się samochód, nie chce ruszyć, mój samochód wygląda tak, co może nie działać...? - tak wygląda teraz Twoje pytanie.
Lampek
Co do z-index próbowałem nie działa :/ jutro postaram sie pokazac online. Narazie wrzucam kod
HTML odpowiedzialny za wyświetlanie slidera i tooltipa:
  1. <table width="100%" border="0" cellspacing="0" cellpadding="0">
  2. <tr>
  3. <td valign="middle" class="sponsorzy">
  4. <div id="wrap" align="center">
  5. <ul id="mycarousel" class="jcarousel-skin-tango">
  6. <li><a href="#" class="tip_trigger"><img src="images/hd1.png"/><span class="tip"><img src="images/hd.png" /></span></a></li>
  7.  
  8. <li><a href="#" class="tip_trigger"><img src="images/hd2.png"/><span class="tip"><img src="images/hd.png" /></span></a></li>
  9. <li><a href="#" class="tip_trigger"><img src="images/hd3.png"/><span class="tip"><img src="images/hd.png" width="124" height="70" alt="" /></span></a></li>
  10. <li><a href="#" class="tip_trigger"><img src="images/hd4.png"/><span class="tip"><img src="images/hd.png" width="124" height="70" alt="" /></span></a></li>
  11. <li><a href="#" class="tip_trigger"><img src="images/hd5.png"/><span class="tip"><img src="images/hd.png" width="124" height="70" alt="" /></span></a></li>
  12. <li><a href="#" class="tip_trigger"><img src="images/hd6.png"/><span class="tip"><img src="images/hd.png" width="124" height="70" alt="" /></span></a></li>
  13. <li><a href="#" class="tip_trigger"><img src="images/hd7.png"/><span class="tip"><img src="images/hd.png" width="124" height="70" alt="" /></span></a></li>
  14. <li><a href="#" class="tip_trigger"><img src="images/hd8.png"/><span class="tip"><img src="images/hd.png" width="124" height="70" alt="" /></span></a></li>
  15. <li><a href="#" class="tip_trigger"><img src="images/hd9.png"/><span class="tip"><img src="images/hd.png" width="124" height="70" alt="" /></span></a></li>
  16. <li><a href="#" class="tip_trigger"><img src="images/hd10.png"/><span class="tip"><img src="images/hd.png" width="124" height="70" alt="" /></span></a></li>
  17. <li><a href="#" class="tip_trigger"><img src="images/hd11.png"/><span class="tip"><img src="images/hd.png" width="124" height="70" alt="" /></span></a></li>
  18. <li><a href="#" class="tip_trigger"><img src="images/hd12.png"/><span class="tip"><img src="images/hd.png" width="124" height="70" alt="" /></span></a></li>
  19. <li><a href="#" class="tip_trigger"><img src="images/hd13.png"/><span class="tip"><img src="images/hd.png" width="124" height="70" alt="" /></span></a></li>
  20. <li><a href="#" class="tip_trigger"><img src="images/hd14.png"/><span class="tip"><img src="images/hd.png" width="124" height="70" alt="" /></span></a></li>
  21. <li><a href="#" class="tip_trigger"><img src="images/hd15.png"/><span class="tip"><img src="images/hd.png" width="124" height="70" alt="" /></span></a></li>
  22. <li><a href="#" class="tip_trigger"><img src="images/hd16.png"/><span class="tip"><img src="images/hd.png" width="124" height="70" alt="" /></span></a></li>
  23. <li><a href="#" class="tip_trigger"><img src="images/hd17.png"/><span class="tip"><img src="images/hd.png" width="124" height="70" alt="" /></span></a></li>
  24. <li><a href="#" class="tip_trigger"><img src="images/hd18.png"/><span class="tip"><img src="images/hd.png" width="124" height="70" alt="" /></span></a></li>
  25. <li><a href="#" class="tip_trigger"><img src="images/hd19.png"/><span class="tip"><img src="images/hd.png" width="124" height="70" alt="" /></span></a></li>
  26. <li><a href="#" class="tip_trigger"><img src="images/hd20.png"/><span class="tip"><img src="images/hd.png" width="124" height="70" alt="" /></span></a></li>
  27. </ul>
  28.  
  29. </div>
  30. </td>
  31. </tr>


css od tooltipa i klasy sponsorzy


  1. .tip {
  2. color: #fff;
  3. background:#1d1d1d;
  4. display:none; /*--Domyślnie ukryty--*/
  5. padding:10px;
  6. margin-left: -500px;
  7. position:absolute; z-index:1000;
  8. -webkit-border-radius: 3px;
  9. -moz-border-radius: 3px;
  10. border-radius: 3px;
  11.  
  12. }
  13.  
  14. .sponsorzy {
  15. background-image:url(images/1stCut_02.png);
  16. height:77px;
  17. background-repeat:repeat-x;
  18. vertical-align:middle;
  19. }
bzeebzee
Kiedyś napisałem sobie mały skrypcik tworzący coś na wzór tooltipa w którym miał wyświetlać się tytuł zdjęcia z galerii. Może się przyda:

  1. function flyingTitle() {
  2. var title;
  3. $('.photos img').mousemove(function(e) { // wyświetlanie tooltipa tylko gdy myszka znajduje się na zdjęciem
  4. $('.flyingTitle').html($(this).attr('title')).css('display', 'block'); // pobieranie tekstu do tooltipa, tutaj wykorzystałem znacznik title
  5. $('.flyingTitle').css('left', e.pageX+15); // obliczanie pozycji tooltipa w oknie przeglądarki, względem wskaźnika myszki
  6. $('.flyingTitle').css('top', e.pageY-4);
  7. }).mouseout(function() {
  8. $('.flyingTitle').css('display', 'none');
  9. })
  10. $('.photo_nav').mouseover(function() {
  11. $('.flyingTitle').css('display', 'none');
  12. });
  13. }
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.