0

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

  • 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 '13 at 8:23
1

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;
    }
  • 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 '12 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 – Ravindra Singh Nov 16 '12 at 12:59
0

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

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 '12 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 '12 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 '12 at 18:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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