Tooltip cu imagine in coloana din tabel

Coduri intrebari, probleme legate de HTML, XHTML si CSS
andras
Mesaje: 430

Tooltip cu imagine in coloana din tabel

Salut,
Intr-o coloana din tabel html (cu date preluate din BD) am o referinta la un fisier imagine (ex. "poze/pencil.png"). Cum fac ca la onmouseover sa apara ca tooltip chiar imaginea la o dimensiune pe care o stabilesc eu (pe x, respectiv y) ? Multumesc.
MarPlo Mesaje: 4343
Salut
Se poate face doar cu HTML si CSS.
Datele din acea coloana se adauga intr-un Div, impreuna cu imaginea pt Tooltip. In CSS se defineste ca imaginea sa fie initial neafisata (display: none;) si cu pozitie absoluta (position: absolute;), iar la ":hover" pe acea coloana sa afiseze imaginea.
Vezi acest exemplu, modifica imaginea si dimensiunile dupa cum iti trebuie.

Cod: Selectaţi tot

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Tooltip in columns in HTML Table</title>
<style type="text/css">
#t_id {
  margin: 1% auto;
}
#t_id, #t_id td {
  border: 1px solid #333;
  padding: 1px;
}
#t_id td div {
  position: relative;
}
#t_id td .td_tooltip {
  display: none;
  position: absolute;
  top: -50px;
  left: 50%;
  margin: 0;
  width: 100px;
  height: 50px;
}
#t_id td:hover .td_tooltip {
  display: block;
}
#t_id td .td_tooltip:hover {
  display: block;
}
</style>
</head>
<body>

<table id="t_id">
<tbody>
  <tr>
    <th>WebSite</th>
    <th>Title</th>
    <th>Description</th>
  </tr>
  <tr>
    <td class="row_s"><div>
      <img src="image_1.jpg" alt="Img 1" width="100" height="50" class="td_tooltip" /> https://coursesweb.net/
    </div></td>
    <td class="row_t">Courses WebDevelopment</td>
    <td class="row_d">Free WebDevelopment courses, Games ...</td>
  </tr>
  <tr>
    <td class="row_s"><div>
      <img src="image_2.jpg" alt="Img 2" width="100" height="50" class="td_tooltip" /> https://marplo.net/
    </div></td>
    <td class="row_t">MarPlo.net - Free Courses</div></td>
    <td class="row_d">Free Courses, Games, Spirituality</td>
  </tr>
</tbody></table>

</body>
</html>
andras Mesaje: 430
Salut,
In IE10 nu merge deloc partea de hover in tabele html (deci nu merge nici Tooltip la imagine), dar hover-ul merge in IE11, Chrome, Firefox, Opera. Care ar putea fi cauza?
MarPlo Mesaje: 4343
Salut
Nu stiu care e cauza pe IE10, nu am acea versiune de browser. La mine Internet Explorer nu-l folosesc, am o versiune mai veche, IE8, am testat pe el si functioneaza hover. Surprinzator ca nu merge pe IE10, dar nu am cum sa testez.

Subiecte similare