Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS] Tooltip zawsze na wierzchu
Forum PHP.pl > Forum > Po stronie przeglądarki
tomczan
Witam
Korzystam z tego tooltip'a: http://perfectionorvanity.com/2005/12/12/tooltip-w-css/ mam go umieszczonego w div'ie, wszystko jest ok, do kiedy ten tooltip nie jest na elemencie który znajduje się w pobliżu 'granicy' div'a (zostaje obcinany to tej granicy). Jak to rozwiązać?
vokiel
Jeśli ma być za pomocą czystego css, bez js to polecam: Pure CSS Tooltips

Jeśli rodzic ucina to ustaw większy z-index dla linku niż dla div'a
ucho
Z ciekawości sprawdziłem i w Operze 10 to nadal nie działa poprawnie, wystarczy przewinąć stronę i już wyświetlają się w złym miejscu. Oczywiście to ficzer a nie bug tongue.gif
tomczan
~vokiel, z-index nie pomaga, Pure CSS Tooltips też.
~ucho, też zauważyłem tą niepoprawność.

Dorzucam kod CSS:

  1. .tooltip {
  2. position: relative;
  3. }
  4.  
  5. .tooltip dfn {
  6. display: none;
  7. width:150px;
  8.  
  9. }
  10. .tooltip:hover dfn, .tooltiph dfn {
  11. display: block;
  12. position: absolute;
  13. left: 3em;
  14. top: 1.5em;
  15. padding: 5px 5px;
  16. border: 1px dashed;
  17. background: #FFFFFF;
  18. color: #000;
  19. font-style: normal;
  20. font-size: 8pt;
  21. line-height: 100%;
  22. text-decoration: none;
  23. }
  24.  
  25. .tooltip dfn span {
  26. display: block;
  27.  
  28. }
  29. .tooltip dfn a {
  30. color:#f00;
  31. font-weight:bold;
  32.  
  33. }



i HTML:

  1. <div style="margin-left:70px; overflow:hidden;height:615px;width:615px;border:1px solid #000">
  2. <div style="width:307px;height:307px;margin:0 0 0 307px;position:relative; ">
  3. <span style="width:41px;height:41px;background-color:red;position:absolute;bottom:143px;left:-307px;">
  4. <a class="tooltip">
  5. <img src="image.gif" />
  6. <dfn>
  7. nazwa<br /><br />
  8. dane 1<br />
  9. (13 x 21)<br /><br />
  10. <a href="index.php">->tutaj</a><br />
  11. <br />
  12. <a href="#">->tomczan</a><br /><br />
  13. <a href="xxx">->w</a>
  14. </dfn></a>
  15. </span> </div>
  16. </div>


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.