lindm Posted June 13, 2009 Share Posted June 13, 2009 Having trouble creating a tooltip contents. It is supposed to match a class with a variable of the script. For instance, if an element has the class "tip1" the contents of variable tip1 will be shown, etc. Se my script so far, based on Vertigo script and jquery, rebuilt to be able create tooltip contents from variable. The critical code is "+ this.className +" in the javascript: Javascript: /** Based on Vertigo Tip by www.vertigo-project.com Requires jQuery */ var tip1 = "tip1"; var tip2 = "tip2"; var tip3 = "tip3"; var tip4 = "tip4"; var tip5 = "tip5"; this.vtip = function() { this.xOffset = -10; // x distance from mouse this.yOffset = 10; // y distance from mouse $("*[class^=tip]").unbind().hover( function(e) { this.top = (e.pageY + yOffset); this.left = (e.pageX + xOffset); $('body').append( '<p id="vtip"><img id="vtipArrow" />' + this.className + '</p>' ); $('p#vtip #vtipArrow').attr("src", 'images/vtip_arrow.png'); $('p#vtip').css("top", this.top+"px").css("left", this.left+"px").show(); }, function() { this.title = this.t; $("p#vtip").hide().remove(); } ).mousemove( function(e) { this.top = (e.pageY + yOffset); this.left = (e.pageX + xOffset); $("p#vtip").css("top", this.top+"px").css("left", this.left+"px"); } ); }; jQuery(document).ready(function($){vtip();}) Html: <html> <head> <title>vTip Example</title> <script type="text/javascript" src="./jquery.js"></script> <script type="text/javascript" src="./vtip.js"></script> <link rel="stylesheet" type="text/css" href="css/vtip.css" /> </head> <body> <a href="" class="tip1">Example 1</a> </br> <a href="" class="tip2">Example 2</a> </br> <a href="" class="tip3">Example 3</a> </body> </html> Thanks Quote Link to comment Share on other sites More sharing options...
rhodesa Posted June 13, 2009 Share Posted June 13, 2009 replace this.className with window[this.className] Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.