How to use tooltip with jQuery?

Question

I have a simple tooltip which has long JavaScript code in the divs. I would to make it as simple as possible.

Here is my code:

  <div onmouseover="document.getElementById('tt1DX1').style.display='block'" onmouseout="document.getElementById('tt1DX1').style.display='none'" style="position:relative;">Tool
    <div id="tt1DX1" class="toolTip_new pbc11_ttpos1_1Q_di" style="display: none;">
      <div class="tool_wrapper">
        <div class="tooltip_top_new"></div>
        <div class="tooltip_middle_new">
          <div class="content">
            <p>Please holder actuall text</p>
            <p>Please holder actuall text</p>
            </div>
          </div>
        <div class="tooltip_bot_new2"></div>
        </div>
      </div>
    </div>

css

.tooltip_top_new{
    background:url(../images/n_tooltip_top.png) no-repeat;
    height:9px;
    width:212px;
}
.tooltip_middle_new{
    background:url(../images/n_tooltip_middle.png) no-repeat;
    width:212px;
}
.tooltip_middle_new .content{
    padding:2px 13px 1px;
}
.tooltip_middle_new .content p{
    line-height: 1.3;
    margin-bottom: 1em;
    text-align: left;
}
.tooltip_bot_new2{
    background:url(../images/n_tooltip_bot2.png) no-repeat;
    height:21px;
    width:212px;
}



.Question_di{
    position:relative;
}
.pbc11_ttpos1_1Q_di {
    border: 0 solid #FF0000;
}
.toolTip_new {
    background: none repeat scroll 0 0 transparent;
    color: #5C5C5C;
    display: none;
    font: 10px/12px Tahoma,Geneva,sans-serif;
    left: -173px;
    top: -90px;
    position: absolute;

    z-index: 1000;
}

The thing is that I have to copy & paste onmouseover="document.getElementById('tt1DX1').style.display='block'" onmouseout="document.getElementById('tt1DX1').style.display='none'" wherever I'm using the tooltips, I would like to avoid it.

Check out CSS bootstrap tooltips, very simple. twitter.github.com/bootstrap/javascript.html#tooltips — Matt Urtnowski
– Matt Urtnowski, Commented Apr 3, 2012 at 14:31
you are using a 1.9 milestone right? (without checking) I didn't think the tooltip was available in 1.8.x — matchew
– matchew, Commented Apr 3, 2012 at 14:32

Richard Connamacher · Accepted Answer · 2012-04-03 17:44:07Z

1

JQueryTools includes a Tooltip module which will get rid of a big chunk of your code.

http://jquerytools.org/demos/tooltip/index.html

It's also possible to create tooltips with no JavaScript at all, using HTML and CSS along these lines:

<div class="has-tooltip">
  <button class="huge red">You Know You Wanna...</button>
  <div class="tooltip">Do NOT Press This Button.</div>
</div>

And in CSS:

.has-tooltip .tooltip {
  position: absolute;
  display: none;

  <style code to position (with margin-left and margin-top)
   and make the tooltip box look how you want>

}

.has-tooltip:hover .tooltip {
   display: block;
 }

Google "CSS Tooltips" to see lots of examples.

edited Apr 3, 2012 at 17:44

answered Apr 3, 2012 at 14:37

Richard Connamacher

3,22622 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mo. Over a year ago

the thing is that I have to copy & paste

onmouseover="document.getElementById('tt1DX1').style.display='block'" onmouseout="document.getElementById('tt1DX1').style.display='none'"

where ever using the tooltips,I need to avoid that

Richard Connamacher Over a year ago

Both approaches will get rid of that code. Just create a has-tooltip class (class="has-tooltip") and a 'tooltip' class for the tooltips themselves, and target them with that.

Collectives™ on Stack Overflow

How to use tooltip with jQuery?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related