I try to implement this simple js tooltip script on drupal 6 site.



$('#container').on('mouseenter', '#radiobtn', showBox);
$('#container').on('mouseleave', '#radiobtn', hideBox);

function showBox(e){
var x = e.pageX + 20;
var y = e.pageY + 20;
$('#hoverbox').offset({ left: x, top: y });
function hideBox(){

However, the framework is 1.8.2 The script is not working under 1.3.2 which uses drupal 6 Can somebody help me with js code for 1.3.2?

Thank you very much

  • Please don't post answers inside question and avoid link-only answers. Link can still be found in edit history, if anyone wants to turn it into an answer.
    – Mołot
    Sep 3, 2013 at 8:23

3 Answers 3


if you don't want to upgrade the jQuery version. Please try this.


$(document).ready(function() {

    var changeTooltipPosition = function(event) {
      var tooltipX = event.pageX - 8;
      var tooltipY = event.pageY + 8;
      $('div.tooltip').css({top: tooltipY, left: tooltipX});

    var showTooltip = function(event) {
      $('<div class="tooltip">I\' am tooltips! tooltips! tooltips! :)</div>')

    var hideTooltip = function() {

       mousemove : changeTooltipPosition,
       mouseenter : showTooltip,
       mouseleave: hideTooltip


<label id="tooltip2">Mouse Hover here</label> 

CSS Code

        border:1px solid blue;
        position: absolute;
        z-index: 2;
  • hello, I tried this code but doesn't work for drupal 6. I read more about jquery version in drupal 6 and found out, that drupal 6 uses only 1.3.2 version of jquery. I edited also the original question. Would it be possible to rewrite the code for thos version? Thank you for your help.
    – loparr
    Nov 16, 2012 at 9:31
  • previously you asked for 1.6.4 version of jQuery. for that the above given code is working fine...you need to upgrade the your jquery version if possible Nov 16, 2012 at 12:59

I would suggest you to add the latest jQuery library to your site. You can do that by:

  1. Copying the jQuery library to your theme's JS folder.
  2. Then modifying the .info file of the theme and adding the following line to it:
    scripts[] = JS/jquery-1.8.2.js. Do this if you want to use the same library throughout your project. OR
  3. If you want to use it for some particular scenario (in custom module, for example) you can use drupal_add_js() function to do that.
    drupal_add_js(drupal_get_path('theme', 'your_custom_theme') . '/JS/jquery-1.8.2.js');

With jQuery 1.3.2 you can't use on() (or even delegate()) so you're left with the live() method:

$('#radiobtn').live('mouseenter', showBox).live('mouseleave', hideBox);

At first glance I can't see anything else that would need to change.

  • hello, I changed what you suggested but it is not working for some reason. here is my test site www(dot)test(dot)biome(dot)sk js file called tooltip is loaded and #hoverbox is present as well. Can not figure out why there is no tooltip showing.
    – loparr
    Nov 16, 2012 at 11:20
  • how is it possible to fix it? I used simple js files like this before and it never happened to me. The code is simple, I can see that jquery 1.3.2 is loaded what else should I check?
    – loparr
    Nov 16, 2012 at 12:35
  • I'm afraid this isn't the right place to ask about javascript problems unless they directly involve Drupal (which this doesn't, you could add the same script to any site and still be experiencing the same problem). Try searching on Stack Overflow for similar issues, and if you can't find any it might be worth asking a question over there
    – Clive
    Nov 16, 2012 at 18:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.