Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]tooltip - problem
Forum PHP.pl > Forum > Przedszkole
Mlodycompany
29.04.2010, 17:38:24
Witam. Mam problem z tzn. tooltipem. Otóż gdy atrybut css position jest równy relative całej chmurki(#events) to chmurka kończy się razem z divem czyli jest ucięta, a gdy ustawie position na fixed wtedy chmurka jest daleko od najechanego elementu. Nie mam pomysłu jak to rozwi±zać.

Kody
[HTML] pobierz, plaintext 
  1. <style>
  2. * {
  3. 	/* old-style reset here :) */
  4. 	border: 0px;
  5. 	padding: 0px;
  6. }
  7. td.date_has_event {
  8. 	background-position: 162px 0px;
  9. 	color: white;
  10. }
  11. td.date_has_event:hover {
  12. 	background-position: 162px -81px;
  13. }
  14. td.padding {
  15. 	background: url(../img/calpad.jpg);
  16. }
  17. td.today {
  18. 	background-position: 81px 0px;
  19. 	color: white;
  20. }
  21. td.today:hover {
  22. 	background-position: 81px -81px;
  23. }
  24. .events {
  25. 	position: relative; <--- chodzi o t± linie
  26. 	z-index: 9999;
  27. }
  28. .events ul {
  29. 	text-align: left;
  30. 	position: absolute;
  31. 	display: none;
  32. 	z-index: 1000;
  33. 	padding: 15px;
  34. 	background: #E7ECF2;
  35. 	color: white;
  36. 	border: 1px solid white;
  37. 	font-size: 12px;
  38. 	width: 100px;
  39. 	-moz-border-radius: 3px;
  40. 	-khtml-border-radius: 3px;
  41. 	-webkit-border-radius: 3px;
  42. 	-border-radius: 3px;
  43. 	list-style: none;
  44. 	color: #444444;
  45. 	-webkit-box-shadow: 0px 8px 8px #333;
  46. }
  47. .events li {
  48. 	padding-bottom: 5px;
  49. }
  50. .events li span {
  51. 	display: block;
  52. 	font-size: 12px;
  53. 	text-align: justify;
  54. 	color: #555;
  55. }
  56. .events li span.title {
  57. 	font-weight: bold;
  58. 	color: #222;
  59. }
  60. </style>
  61. <td class="date_has_event"><a href="archiwum/2010/04/15/">15</a><div class="events">
  62. 							<ul>
  63. 								<li>
  64. 									Artykułów: 2
  65. 								</li>
  66. 							</ul>
  67. 						</div></td><td class="date_has_event"><a href="archiwum/2010/04/16/">16</a><div class="events">
  68. 							<ul>
  69. 								<li>
  70. 									Artykułów: 1
  71. 								</li>
  72. 							</ul>
  73. 						</div></td>
[HTML] pobierz, plaintext

Może macie jaki¶ pomy¶ł jak to rozwi±zać?
by_ikar
29.04.2010, 18:47:51
Więc tak, już raz to tłumaczyłem jednej osobie. Tak więc, position relative ustawia dany blok jako rodzica, w pozycjonowaniu absolutnym. Jeżeli nie ustawisz np <li> pozycji relatywnej, w tedy pozycjonuj±c co¶ absolutnie będziesz pozycjonował to względem rodzica który ma nadan± pozycję relatywn±, domy¶lnie <body> ma pozycję relatywn±. Jeżeli już masz jaki¶ blok któremu nadałe¶ pozycję relatywn±, to wewn±trz tego bloku możesz co¶ pozycjonować absolutnie względem tego bloku (w tym wypadku chcesz aby tak było). Masz nadan± pozycję absolutn±, ale nie podałe¶ żadnej warto¶ci top lub/i left. Dodaj warto¶ci do selektora .events ul przykładowo top: 20px; left: 20px; Jeżeli dodatkowo chcesz (raczej na pewno) żeby "chmurka" pojawiała się po najechaniu na link/przycisk musisz użyć pseudoselektora :hover. Cało¶ć już jaki¶ czas temu wykonywałem najpierw dla znajomego, a potem dla jakiego¶ kolesia również na forum ponieważ również tego nie rozumiał. Tutaj masz kod: 

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5. 	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
  6. 	<meta name="author" content="by_ikar">
  7. 	<style>
  8. div.tooltip {
  9. 	display: none;
  10. 	position: absolute;
  11. 	top: 24px; left: 0;
  12. 	z-index: 40;
  13. 	text-align: center;
  14. 	width:200px;
  15. }
  16. div.tooltip span.top{
  17. 	position: absolute;
  18. 	top: 1px;
  19. 	left: 40px;
  20. 	width: 11px;
  21. 	height: 10px;
  22. 	background: url(http://img217.imageshack.us/img217/6918/tooltiptop.png) no-repeat;
  23. 	/*background-color: #000;*/
  24. }
  25.  
  26. div.tooltip span.message{
  27. 	margin:2px;
  28. 	margin-top: 10px;
  29. 	padding: 5px;
  30. 	background-color: #F7F7F7;
  31. 	border: 1px solid #B7B7B7;
  32. 	display: block;
  33. }
  34.  
  35.  
  36. a.tt:hover + div.tooltip{
  37. 	display: block;
  38. }
  39. li { position: relative; }
  40. 	</style>
  41. 	<title>Bez tytułu 1</title>
  42. </head>
  43.  
  44. <body>
  45.  
  46. <ul>
  47. <li><a href="#" class="tt"> jakis link testowy</a> <div class="tooltip"><span class="top"></span> <span class="message">Selektor dziecka odnosi się do znaczników, które mają okreœlonego rodzica. Każdy element okreœlony po znaku </span></div></li>
  48. <li><a href="#" class="tt"> jakis link testowy</a> <div class="tooltip"><span class="top"></span> <span class="message">Selektor dziecka odnosi się do znaczników, które mają okreœlonego rodzica. Każdy element okreœlony po znaku </span></div></li>
  49. <li><a href="#" class="tt"> jakis link testowy</a> <div class="tooltip"><span class="top"></span> <span class="message">Selektor dziecka odnosi się do znaczników, które mają okreœlonego rodzica. Każdy element okreœlony po znaku </span></div></li>
  50.  
  51. <li><a href="#" class="tt"> jakis link testowy</a> <div class="tooltip"><span class="top"></span> <span class="message">Selektor dziecka odnosi się do znaczników, które mają okreœlonego rodzica. Każdy element okreœlony po znaku </span></div></li>
  52. <li><a href="#" class="tt"> jakis link testowy</a> <div class="tooltip"><span class="top"></span> <span class="message">Selektor dziecka odnosi się do znaczników, które mają okreœlonego rodzica. Każdy element okreœlony po znaku </span></div></li>
  53. <li><a href="#" class="tt"> jakis link testowy</a> <div class="tooltip"><span class="top"></span> <span class="message">Selektor dziecka odnosi się do znaczników, które mają okreœlonego rodzica. Każdy element okreœlony po znaku </span></div></li>
  54.  
  55. <li><a href="#" class="tt"> jakis link testowy</a> <div class="tooltip"><span class="top"></span> <span class="message">Selektor dziecka odnosi się do znaczników, które mają okreœlonego rodzica. Każdy element okreœlony po znaku </span></div></li>
  56. </ul>
  57.  
  58.  
  59.  
  60. </body>
  61. </html>
[HTML] pobierz, plaintext
Mlodycompany
29.04.2010, 19:04:05
Dzięki. Naprowadziło mnie to troche i pozmieniałem co nie co i zaczeło działać. Zobaczymy na jak długo biggrin.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.