0

I'm looking to create a hover-over div that appears when a user hovers over images inside a td. This would look similar to when you hover over an image that has a title attribute:

enter image description here

According to this question, a div inside a table is valid HTML but I would need to set the internal div to position: absolute; and the containing td position: relative; and according to one of the answers in the thread this could cause problems:

If you want to use position: absolute; on the div with position: relative; on the td you will run into issues. FF, safari, and chrome (mac, not PC though) will not position the div relative to the td (like you would expect)

So how could I show a div that appears when hovering over the images contained in the td?

Community
  • 1
  • 1
docta_faustus
  • 2,383
  • 4
  • 30
  • 47
  • 1
    Hey I found this one about positioning div inside td http://stackoverflow.com/questions/4564638/using-position-relative-absolute-within-a-td – Husain Ahmmed Mar 30 '16 at 00:13

2 Answers2

0

Use:

<td alt='hover text' title='hover text'>

alt and title work with different browsers, and this won't work on most mobile browsers.

Arif Burhan
  • 507
  • 4
  • 12
-1

Add a div with position:relative to the td (wrapped around the td content) and then you can add your absolutely positioned div inside the relative one.

Or, if you only need a title-like tooltip, use the title attribute on your td

Stuart
  • 6,630
  • 2
  • 24
  • 40
  • Not sure why this was marked down...? It's actually a viable way of achieving what OP requires... You cannot position a table cell,so a nested div is required. – Stuart Mar 30 '16 at 18:51