Textbox 'popup' display on mouseover/hover for CSS/Javascript

Question

I have an html td element with text inside. I want it so you can hover over that element, and display a textbox on top of the active page/element explaining what that td tag's content means. Some kind of elaboration. Like the <abbr> tag.

Can this be done in CSS or Javascript?

Answer 1

This is possible with CSS, also with javascript. Create a table with an element:

<table>
<tr><td>
    <a href="#">Info
        <div class="tooltipcontainer">
            <div class="tooltip">Here some info</div>
        </div>
    </a>
</td></tr>
</table>

CSS:

/* Container is necessary because td cannot be positioned relative */
td .tooltipcontainer {
    position: relative;
}
td .tooltip {
    display: none;
    position: absolute;
    /* More positioning, heigh, width, etc */
}
td a:hover .tooltip {
    display: block;
}

When you hover over 'Info' it will show the text in the div with class='tooltip'. JavaScript (for example any jQuery tooltip plugin) has solutions with more options.

Answer 2

Example markup..

<td id="1">..</td>
<td id="2">..</td>
<td id="thisiswhatiwanttohaveahover"><div class="tooltip hidden"></div></td>

CSS Style

.visible {
  display:block;
}

.hidden {
  display:none;
}

you can

$('#thisiswhatiwanttohaveahover').hover(function() {
  if ($(this + ' .tooltip').hasClass('hidden')) {
    $(this + ' .tooltip').removeClass('hidden');
    $(this + ' .tooltip').addClass('visible');
  }
  if ($(this + ' .tooltip').hasClass('visible')) {
    $(this + ' .tooltip').removeClass('visible');
    $(this + ' .tooltip').addClass('hidden');
  }
});

hope this helps..

Answer 3

I've used Tooltip JS before. It worked really well and I think it'd be beneficial to you.