jquery code for drupal 6

Question

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

http://jsfiddle.net/wrN2u/50/

$(document).ready(function(){

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

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

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

SOLVED: for anyone interested how to accomplish this here is the link http://stackoverflow.com/questions/13422893/tooltip-position-near-the-mouse-click

Answer 1

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');

Answer 2

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

http://jsfiddle.net/ravindrasingh22/3HVpW/

$(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.tooltip').remove();
      $('<div class="tooltip">I\' am tooltips! tooltips! tooltips! :)</div>')
            .appendTo('body');
      changeTooltipPosition(event);
    };

    var hideTooltip = function() {
       $('div.tooltip').remove();
    };

    $("label#tooltip2'").bind({
       mousemove : changeTooltipPosition,
       mouseenter : showTooltip,
       mouseleave: hideTooltip
    });
});

HTML Code

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

CSS Code

#hint{
     cursor:pointer;
    }
    .tooltip{
        margin:8px;
        padding:8px;
        border:1px solid blue;
        background-color:yellow;
        position: absolute;
        z-index: 2;
    }

Answer 3

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.