Tooltip using hover not working with div?

  <div id="content">
<div class="container">
  <!--start side column-->
  <div class="side-col">
    <div class="searchmodule-header-container"> 
    </div>
    <div class="searchmodule-header-container">开发者_如何学Python;
      <div class="searchmodule-header">
      </div>
    </div>
    <div class="searchmodule-content-container">
      <div class="searchmodule-content">
        <div class="menu">

        </div>
        <div class="menu">
          <ul>

            <li><a href="#" class="tooltiplink">Title <span class="tooltip"><span class="top"></span> <span class="middle">   I triggered this using Jsp dynamic page  </span><span class="bottom"></span></span></a></li>

          </ul>
        </div>

      </div>
    </div>

  </div>

  <div class="main-col">
    <div class="content-header">

    </div>

      <div class="form-container">
      </div>
</div>

In css i just used images to sandwich the content . But when i hover on the link the tooltip is only visible in its container . So how can i get the tooltip(let it be image ) irrespective of the div .

Thanks in advance

From what I understand, I think you are having the tooltip show up in the 'area' it was defined in and you want it to pop up and hover/float near/over the element.

You would need to define your tooltips position [relative/absolute]. That should float it above the rest of the content, with a combination of z-index: value.

Hopefully that is what you are asking, I am making many assumptions here based on your question.

Use title property to show tooltips for DIV

example

<div title='This is DIV area' ></div>