add a simple tool tip with a div title and jquery wrap

This week I spent some time trying to add a 'tooltip' to some textareas in a list.

I spent quite some time adapting a jquery script i found, finally made it work almost correctly in internet explorer 6, only to find out that it did not work as expected in ie7.

Finally I opted for a much easier solution : wrapping the textareas in a div with a title attribute containing the content of the textarea, like this :

<div title="test"><textarea>test</textarea></div>

(see html title attribute doc)

If you let the mouse rest a second over the textarea, the tool tip appears.

test

I did not have access directly to the code generating the textareas, but I could do it nicely with jquery. Let's say my textareas were called 'textarea_1', 'textarea_2', and so on. Here is the line i came up with :

$("textarea[name^='textarea_']").each(function (){jQuery(this).wrap('<div title="' + this.value + '"></div>')})

$("textarea") selects all textareas. (jquery element selector)

$("textarea[name^='textarea_']") selects every textarea whose name starts with 'textarea_'. (jquery 'attribute starts with' selector)

The 'each' function iterates over the selected elements. (jquery each)

'this' refers to the DOM element.

jQuery(this) turns the DOM element into a jQuery object. (jQuery)

The 'wrap' function allowed me to wrap each textarea inside a div. (wrap)

A last step : replacing quotes in the content so that text containing quotes would not be incomplete :

$("textarea[name^='textarea_']").each(function (){jQuery(this).wrap('<div title="' + this.value.replace('"', '&quot;') + '"></div>')})

Oh, that replaces only the first quote it finds... We need to use a 'global' search :

$("textarea[name^='textarea_']").each(function (){jQuery(this).wrap('<div title="' + this.value.replace(/"/g, '&quot;') + '"></div>')})

I only just found out I'd missed the global search, will go correct my code. Writing this post will have been useful to me, at least.