0

I am trying to style tooltip title by following this post. However, it does not work for table. In other words, it seems that a[title] works but th[title] does not.

see the fiddle modified from the original post, where th[title] still uses the default style. http://jsfiddle.net/5frf7svm/

Community
  • 1
  • 1
totoro
  • 3,257
  • 5
  • 39
  • 61

3 Answers3

2

You have this in your CSS:

td[title]:hover:after {
  position: absolute;
  left: 0;
  top: 100%;

Where do you suppose that's shoving the pseudo element? That's right, off the page.

Try this:

http://jsfiddle.net/4p4jk5hh/

All I did was remove the left and top attributes.

Draco18s no longer trusts SE
  • 15,628
  • 3
  • 36
  • 56
  • thanks! is there a straight forward way to place the custom tooltip at mouse pointer? – totoro Jan 22 '16 at 20:48
  • @dragon_cat Not that I can think of off the top of my head. I wouldn't worry about it though, having it in a fixed location relative to the object being hovered is fine from a UX standpoint. – Draco18s no longer trusts SE Jan 22 '16 at 20:58
  • the issue is that i am showing tooltips only when ellipsis is activated, so the tooltip can show up to the far right of the actual table cell depending on the real text length (un-truncated) of the current cell. – totoro Jan 22 '16 at 21:09
1

th[title] works fine for me. But position of title in the end of page, because th have position static.

P.S. Sorry for my English :)

Evgeny Zaytsev
  • 198
  • 5
0

just put an a element inside your th, like so:

<td><a title="cell 1 tooltip">table cell 1</a></td>

bryce
  • 3,022
  • 1
  • 15
  • 19