Home/ Questions/Q 620601
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T18:46:54+00:00

can someone tell me how to create a nice small tooltip like ajax pop-up

  • 0

can someone tell me how to create a nice small tooltip like ajax pop-up ?
the situation is like this,
I am pulling the $row->title from the db, and then I presented it as a link like this

  <?php foreach($task->result() as $row): ?>
    <tr>
    <td><a href=#><?php echo $row->title; ?></a></td>
    </tr>
   <?php endforeach; ?>

when a random user clicks that link, I want it to produce a small pop-up or tooltip like stuff that contains the title’s description $row->description , and when user moves mouse from it,it closes. i know its possible, but i just don’t know how to do it.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You need jQuery. Add stylesheet into <head></head> and javascript to any place in your page.

    Sample style:

    <style type="text/css">
  .description {
    visible: hidden;
    position: absolute;
    left: 0px;
    top: 0px;

    /* View */
    font-family: Arial,Tahoma,Verdana;
    font-size: 8pt;
    color: #bbb;
    background-color: #444;
    padding: 5px 7px;
    border: 1px solid #222;
  }
</style>

    Javascript:

    <script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  // Add listener to links
  $(".some_class").click(function(e) {
    var description = $('<div class="description">'+ $(this).attr("description") +'</div>');
    $(this).append(description);
    description.css("left", e.pageX-4);
    description.css("top", e.pageY-4);
    description.animate({ opacity: 'toggle' }, 400, 'linear');
    // Remove description, if user moved the mouse cursor out description
    description.mouseout(function() {
      $(this).remove();
    });
    return false;
  });
});
</script>

    Change your code:

    <?php foreach($task->result() as $row): ?>
  <tr>
  <td><a href="#" class="some_class" description="<?php echo $row->description; ?>"><?php echo $row->title; ?></a></td>
  </tr>
<?php endforeach; ?>

    But the better way is to check out some good jQuery plugin..

    • 0