Pagina 1 din 1
Tooltip cu imagine in coloana din tabel
Scris: Dum Dec 07, 2014
de andras
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.
Tooltip cu imagine in coloana din tabel
Scris: Dum Dec 07, 2014
de MarPlo
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>
Re: Tooltip cu imagine in coloana din tabel
Scris: Mar Dec 30, 2014
de andras
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?
Tooltip cu imagine in coloana din tabel
Scris: Mar Dec 30, 2014
de MarPlo
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.