...

View Full Version : Set the width of a tooltip.



wanting2learn
03-20-2012, 04:09 PM
I have a the following code for displaying a tooltip:


<a style='margin-left: 10px; position:relative' class="tooltip" title="This is some text to display">

The javascript for the tooltip is as follows:


$(document).ready(function(){

$("a.tooltip").live( {
mouseenter:
function(e){
this.t = this.title;
this.title = "";
$("body").append("<p id='tooltip'>"+ this.t +"</p>");
$("#tooltip")
.css("top",(e.pageY - 10) + "px")
.css("left",(e.pageX + 20) + "px")
.fadeIn("fast");
var css_width = $('#tooltip').width();
var text_width = $('#tooltip').textWidth();
if (css_width > text_width) {
$('#tooltip').width(text_width);
}
},
mouseleave:
function(){
this.title = this.t;
$("#tooltip").remove();
}
}
);

});

$.fn.textWidth = function textWidth() {
var html_org = $(this).html();
var html_calc = '<span>' + html_org + '</span>';
$(this).html(html_calc);
var width= $(this).find('span:first').width();
$(this).html(html_org);
return width;
}

What I want to do is to be able to add another variable 'width' to be able to set the width of the tooltip like so:


<a style='margin-left: 10px; position:relative' class="tooltip" width="100" title="This is some text to display">

This width will then be passed into the javascript above and used to set the width of the tooltip.

How can I modify the above code to do this??

Thanks

devnull69
03-20-2012, 04:17 PM
jQuery makes extensive use of the custom "data-" attributes. So you can use them to pass along extra data.

HTML


<a ..... data-width="100" ...>


Javascript


var widthFromAnchor = $('a.tooltip').data('width');

wanting2learn
03-20-2012, 05:48 PM
Excellent this works.

But I notice that when I have two tool tips on the one html page and they have different lenghts like so:

<a style='margin-left: 10px; position:relative' class="tooltip" data-width="300" title="This is some text to display">

<a style='margin-left: 10px; position:relative' class="tooltip" data-width="100" title="This is some other text to display blah blah">

I notice that the lenght of the tooltip is always the length of the first one I set.

My javascript is like so:

$(document).ready(function(){

$("a.tooltip").live( {
mouseenter:
function(e){
this.t = this.title;
this.title = "";
$("body").append("<p id='tooltip'>"+ this.t +"</p>");
$("#tooltip")
.css("top",(e.pageY - 10) + "px")
.css("left",(e.pageX + 20) + "px")
.fadeIn("fast");

var data_width = $('a.tooltip').data('width');
if(data_width != null){
$('#tooltip').width(data_width);
} else {
var css_width = $('#tooltip').width();
var text_width = $('#tooltip').textWidth();
if (css_width > text_width) {
$('#tooltip').width(text_width);
}
}

},
mouseleave:
function(){
this.title = this.t;
$("#tooltip").remove();
}
}
);

});

Any ideas???

devnull69
03-20-2012, 06:06 PM
Yes, because you are trying to access the wrong element for data-width. With $('a.tooltip').data('width') you are accessing the data-width attribute of the first element in the jQuery collection. But you want to access the data-width attribute of the current element (the element currently being hovered). That's what the "this" keyword is for


var data_width = $(this).data('width');

DanInMa
03-20-2012, 06:10 PM
try this:


$(document).ready(function(){

$("a.tooltip").live( {
mouseenter:
function(e){
this.t = this.title;
this.title = "";
in = $("this").eq();
$("body").append("<p id='tooltip"+in+"'>"+ this.t +"</p>");
$("#tooltip"+in)
.css("top",(e.pageY - 10) + "px")
.css("left",(e.pageX + 20) + "px")
.fadeIn("fast");

var data_width = $(this).data('width');
if(data_width != null){
$("#tooltip"+in).width(data_width);
} else {
var css_width = $("#tooltip"+in).width();
var text_width = $("#tooltip"+in).textWidth();
if (css_width > text_width) {
$("#tooltip"+in).width(text_width);
}
}

},
mouseleave:
function(){
this.title = this.t;
$("#tooltip"+in).remove();
}
}
);

wanting2learn
03-20-2012, 06:19 PM
Thanks for your reply, I trued your code and yes it does adjust the width, but I lost the color formating for the tooltip, (It just appeared grey).

I changed your original post from:
var widthFromAnchor = $('a.tooltip').data('width');
to this:
var widthFromAnchor = $(this).data('width');

And this now works as intended.

Thanks for your help. :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum