Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [Java][CSS]tooltip w tabeli
Forum PHP.pl > Forum > Przedszkole
mazyl
22.07.2012, 20:21:57
Witam!

mam spory problem z umieszczeniem tooltipa na stronie,

cały kod tooltipa wygląda tak:


[PHP] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>Simple JQuery Tooltips turtorial</title>
  5.  
  6. <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
  7. <script type="text/javascript">
  8.  
  9. $(document).ready(function() {
  10.  
  11.     //Select all anchor tag with rel set to tooltip
  12.     $('a[rel=tooltip]').mouseover(function(e) {
  13.  
  14.         //Grab the title attribute's value and assign it to a variable
  15.         var tip = $(this).attr('title');    
  16.  
  17.         //Remove the title attribute's to avoid the native tooltip from the browser
  18.         $(this).attr('title','');
  19.  
  20.         //Append the tooltip template and its value
  21.         $(this).append('<div id="tooltip"><div class="tipHeader"></div><div class="tipBody">' + tip + '</div><div class="tipFooter"></div></div>');     
  22.  
  23.         //Set the X and Y axis of the tooltip
  24.         $('#tooltip').css('top', e.pageY + 10 );
  25.         $('#tooltip').css('left', e.pageX + 20 );
  26.  
  27.         //Show the tooltip with faceIn effect
  28.         $('#tooltip').fadeIn('500');
  29.         $('#tooltip').fadeTo('10',0.8);
  30.  
  31.     }).mousemove(function(e) {
  32.  
  33.         //Keep changing the X and Y axis for the tooltip, thus, the tooltip move along with the mouse
  34.         $('#tooltip').css('top', e.pageY + 10 );
  35.         $('#tooltip').css('left', e.pageX + 20 );
  36.  
  37.     }).mouseout(function() {
  38.  
  39.         //Put back the title attribute's value
  40.         $(this).attr('title',$('.tipBody').html());
  41.  
  42.         //Remove the appended tooltip template
  43.         $(this).children('div#tooltip').remove();
  44.  
  45.     });
  46.  
  47. });
  48.  
  49. </script>
  50.  
  51. <style>
  52. body {font-family:arial;font-size:12px;text-align:center;}
  53. div#paragraph {width:300px;margin:0 auto;text-align:left}
  54. a {color:#aaa;text-decoration:none;cursor:pointer;cursor:hand}
  55. a:hover {color:#000;text-decoration:none;}
  56.  
  57. /* Tooltip */
  58.  
  59. #tooltip {
  60.     position:absolute;
  61.     z-index:9999;
  62.     color:#fff;
  63.     font-size:10px;
  64.     width:180px;
  65.  
  66. }
  67.  
  68. #tooltip .tipHeader {
  69.     height:8px;
  70.     background:url(images/tipHeader.gif) no-repeat;
  71. }
  72.  
  73. /* IE hack */
  74. *html #tooltip .tipHeader {margin-bottom:-6px;}
  75.  
  76. #tooltip .tipBody {
  77.     background-color:#000;
  78.     padding:5px;
  79. }
  80.  
  81. #tooltip .tipFooter {
  82.     height:8px;
  83.     background:url(images/tipFooter.gif) no-repeat;
  84. }
  85.  
  86. </style>
  87.  
  88. </head>
  89.  
  90. <body>
  91.  
  92. <div id="paragraph">
  93. A paragraph typically consists of a unifying main point, thought, or idea accompanied by supporting details. The non-fiction paragraph usually begins with the general and moves towards the more specific so as to advance an argument or point of view. Each <a rel="tooltip" title="A paragraph typically consists of a unifying main point, thought, or idea accompanied by <b>supporting details</b>">paragraph</a> builds on what came before and lays the ground for what comes next. Paragraphs generally range three to seven sentences all combined in a single paragraphed statement. In prose fiction successive details, for example; but it is just as common for the point of a prose paragraph to occur in the middle or the end. A paragraph can be as short as one word or run the length of multiple pages, and may consist of one or many <a rel="tooltip" title="Testing of Sentences">sentences</a>. When dialogue is being quoted in fiction, a new paragraph is used each time the person being quoted changed.
  94. </div>
  95.  
  96. </body>
  97. </html>
[PHP] pobierz, plaintext


chiałbym to umiescic w tabeli, która dane pobiera z mysql

całość wygląda tak:

[PHP] pobierz, plaintext 
  1. <td><div id="paragraph"><a rel="tooltip" title="Wiek: <?php echo $p['wiek']; ?> <br>Wykształcenie: <?php echo $wyk['wyksztalcenie']; ?>"><?php echo $p['nazwisko']; ?>
  2. </a></div>
  3. </td>
[PHP] pobierz, plaintext


jednak tooltip wyświetla się całkowicie na dole strony, im niższy rekord z tabeli tym coraz niżej, po klilku tooltip całkowicie zanika.

wie ktoś jak to naprawić ?
Tuminure
23.07.2012, 09:17:59
Po podmienieniu Twoim tekstem tego co jest w body, tooltip działa poprawnie. Prawdopodobnie namieszałeś coś w swoim CSSie.
mazyl
23.07.2012, 09:34:34
probowałem na wszelkie możliwe sposoby i niestety nie działa.


gotowy kod działa w 100% ale przy wstawieniu go do tabeli tooltip wyświetla sie na dole strony.
Tuminure
23.07.2012, 10:13:18
Najprościej by było, gdybyś pokazał cały plik z próbą implementacji tego skryptu.
mazyl
27.07.2012, 17:16:23
góra strony gdzie znajduje się skrypt:

[PHP] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <link href="style.css" rel="stylesheet" type="text/css" />
  6. <script src="js/jq.js" type="text/javascript"></script>
  7. <link rel="stylesheet" href="css/nivo-slider.css" type="text/css" media="screen" />
  8.     <script type="text/javascript" src="js/jquery.nivo.slider.js"></script>
  9. 	<script src="js//jquery.js" type="text/javascript"></script>
  10. <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
  11.  
  12. <script type="text/javascript">
  13.  
  14.  
  15.  
  16. $(document).ready(function() {
  17.  
  18.  
  19.  
  20.     //Select all anchor tag with rel set to tooltip
  21.  
  22.     $('td[rel=tooltip]').mouseover(function(e) {
  23.  
  24.  
  25.  
  26.         //Grab the title attribute's value and assign it to a variable
  27.  
  28.         var tip = $(this).attr('title');    
  29.  
  30.  
  31.  
  32.         //Remove the title attribute's to avoid the native tooltip from the browser
  33.  
  34.         $(this).attr('title','');
  35.  
  36.  
  37.  
  38.         //Append the tooltip template and its value
  39.  
  40.         $(this).append('<div id="tooltip"><div class="tipHeader"></div><div class="tipBody">' + tip + '</div><div class="tipFooter"></div></div>');     
  41.  
  42.  
  43.  
  44.         //Set the X and Y axis of the tooltip
  45.  
  46.         $('#tooltip').css('top', e.pageY + 10 );
  47.  
  48.         $('#tooltip').css('left', e.pageX + 20 );
  49.  
  50.  
  51.  
  52.         //Show the tooltip with faceIn effect
  53.  
  54.         $('#tooltip').fadeIn('500');
  55.  
  56.         $('#tooltip').fadeTo('10',0.8);
  57.  
  58.  
  59.  
  60.     }).mousemove(function(e) {
  61.  
  62.  
  63.  
  64.         //Keep changing the X and Y axis for the tooltip, thus, the tooltip move along with the mouse
  65.  
  66.         $('#tooltip').css('top', e.pageY + 10 );
  67.  
  68.         $('#tooltip').css('left', e.pageX + 20 );
  69.  
  70.  
  71.  
  72.     }).mouseout(function() {
  73.  
  74.  
  75.  
  76.         //Put back the title attribute's value
  77.  
  78.         $(this).attr('title',$('.tipBody').html());
  79.  
  80.  
  81.  
  82.         //Remove the appended tooltip template
  83.  
  84.         $(this).children('div#tooltip').remove();
  85.  
  86.  
  87.  
  88.     });
  89.  
  90.  
  91.  
  92. });
  93.  
  94.  
  95.  
  96. </script>
  97. <title>Tytuł Twojej strony</title>
  98.  
  99. </head>
  100.  
  101. <body>
  102. <div id="pojemnik">
  103. 	<div id="logo">
  104. 		</div>
  105. 	<div id="header">
[PHP] pobierz, plaintext



plik w którym się znajduje tabela:

[PHP] pobierz, plaintext 
  1. <?php
  2. //włączamy bufor
  3. ob_start();
  4.  
  5. //pobieramy zawartość pliku ustawień
  6. require_once('var/ustawienia.php');
  7.  
  8. //startujemy lub przedłużamy sesję
  9. session_start();
  10.  
  11. //dołączamy plik, który sprawdzi czy napewno mamy dostęp do tej strony
  12. require_once('test_zalogowanego.php');
  13.  
  14. //pobieramy nagłówek strony
  15. require_once('gora_strony.php');
  16.  
  17. //pobieramy zawartość menu
  18. require_once('menu.php');    
  19.  
  20.  
  21. echo "<h2>Lista Ofert Pracy: </h2><div id='lefter'>";
  22. $_GET['zatrudnij'] = (int)$_GET['zatrudnij'];
  23.  
  24. if(!empty($_GET['zatrudnij']) && isset($_GET['pracownik'])){
  25. 	$wyplata = mysql_fetch_array(mysql_query("select zarobki from pracownicy where md5(id) = '".$_GET['pracownik']."'"));
  26. 	$fir = mysql_fetch_array(mysql_query("select id, gracz, rozbudowa, pracownicymax from firmy where id = '".$_GET['zatrudnij']."'"));
  27. 	$ilupracuje = mysql_num_rows(mysql_query("select id from pracownicy where firma = '".$fir['id']."'"));
  28. 	if($_GET['zatrudnij'] < 1){
  29. 		echo "<p class='error'>Nie ma takiej firmy</p><br class='clear'>";
  30. 	} elseif($uzytkownik['gracz'] != $fir['gracz']) {
  31. 	echo "<p class='error'>Ta Firma nie nalezy do ciebie</p><br class='clear'>";
  32. 	} elseif($wyplata['zarobki'] > $uzytkownik['kasa']) {
  33. 	echo "<p class='error'>Nie posiadasz wystarczajaco pieniędzy by zatrudnić tego pracownika</p><br class='clear'>";
  34. 	} elseif($fir['pracownicymax'] <= $ilupracuje) {
  35. 	echo "<p class='error'>Twoja Firma osiagnęła Maksymalną liczbę pracowników</p><br class='clear'>";
  36. 	} elseif(empty($_GET['pracownik'])){
  37. 		echo "<p class='error'>Nie wybrano pracownika</p><br class='clear'>";
  38. 	} else {
  39.  
  40. 			mysql_query("update pracownicy  set firma = '".$_GET['zatrudnij']."' where md5(id) = '".$_GET['pracownik']."'");
  41. 			mysql_query("update economy_gracze  set kasa = kasa - '".$wyplata['zarobki']."' where gracz = '".$uzytkownik['gracz']."'");
  42. 			if(mysql_affected_rows() == 0){
  43. 				echo "<p class='error'>Błędne dane</p><br class='clear'>";
  44. 			} else {
  45. 				echo "<p class='note'>Zatrudniono Pracownika</p><br class='clear'>";
  46. 			}
  47. 		}
  48. 	}
  49. function skroc($tekst,$ile) {
  50.                  $znaki = strlen($tekst);
  51.                  if ($znaki>=$ile) {
  52.                  $tnij = substr($tekst,0,$ile);
  53.                  $skrocone = $tnij."...";
  54.                  }
  55.                  else {
  56.                  $skrocone = $tekst;
  57.                  }
  58.                  return $skrocone;
  59. }
  60. ?>
  61. <style>
  62. /* Tooltip */
  63. #tooltip {
  64.     position:absolute;
  65.     z-index:9999;
  66.     color:#fff;
  67.     font-size:10px;
  68.     width:180px;
  69. }
  70. #tooltip .tipHeader {
  71.     height:8px;
  72.     background:url(images/tipHeader.gif) no-repeat;
  73. }
  74. /* IE hack */
  75.  
  76. *html #tooltip .tipHeader {margin-bottom:-6px;}
  77. #tooltip .tipBody {
  78.     background-color:#000;
  79.     padding:5px;
  80. }
  81. #tooltip .tipFooter {
  82.     height:8px;
  83.     background:url(images/tipFooter.gif) no-repeat;
  84. }
  85. </style>
  86. <div id="paragraph">
  87. <table><tr>
  88. <td>Lp.</td>
  89. <td>Imie i nazwisko</td>
  90.  
  91. <td>Typ</td>
  92. <td>Wyd.</td>
  93. <td>Wyplata/dzień</td>
  94. <td width='200px' >Akcja</td>
  95. </tr>
  96.  
  97. <?php
  98. $i = 1;
  99. $pracownicy = mysql_query("select * from pracownicy where firma = 0 order by zarobki asc");
  100. while($p = mysql_fetch_array($pracownicy)) {
  101.  
  102. $typ =mysql_fetch_array(mysql_query("select * from typyfirm where id = '".$p['typ']."'"));
  103. $wyk =mysql_fetch_array(mysql_query("select * from wyksztalcenie where id = '".$p['wyksztalcenie']."'"));
  104. ?>
  105. <tr>
  106. <td><?php echo $i++; ?> </td>
  107. <td rel="tooltip" title="Wiek: <?php echo $p['wiek']; ?> <br>Wykształcenie: <?php echo $wyk['wyksztalcenie']; ?>"><?php echo $p['nazwisko']; ?>
  108. </td>
  109. <td><?php echo $typ['typ']; ?> </td>
  110. <td><?php echo $p['wydajnosc']; ?> </td>
  111. <td><?php echo $p['zarobki'];  echo $waluta;?> </td>
  112. <td><?php 
  113. $zatrudnij = mysql_query("select id, nazwa from firmy where gracz = '".$uzytkownik['gracz']."'");
  114. while($z = mysql_fetch_array($zatrudnij)) {
  115. $nazwa = skroc ($z['nazwa'],15);
  116. echo "<br><a href='oferty_pracy.php?zatrudnij=".$z['id']."&pracownik=".md5($p['id'])."'>Zatrudnij do ".$nazwa."</a>";
  117. }
  118. ?></td>
  119. </tr>
  120.  
  121. <?php
  122. }
  123.  
  124. echo "</table></div>";
  125.  
  126.  
  127.  
  128.  
  129. //pobieramy zawartość prawego bloku
  130. require_once('prawy_blok.php');
  131.  
  132. //pobieramy stopkę
  133. require_once('dol_strony.php');
  134.  
  135. //wyłączamy bufor
  136. ob_end_flush();
  137. ?> 
[PHP] pobierz, plaintext


wie ktoś jak rozwiązać ten problem?
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.