CODEWITHSUNDEEP
javascriptjquerytooltip
Mark Kramer
Mark Kramer

Reputation: 3214

Inserting linebreak in the title attribute using javascript/jquery

Question:
I need to put a linebreak inside my tooltip so it's not all on one line. I use tooltipsy to generate my tooltips. It works by using the title attribute on any anchor tags with the class "hastipy" as the content of the tooltip.

So the code: 

<a href="http://tooltipsy.com/" class="hastipy" title="Click here to go to the tooltipsy website">
     tooltipsy
</a>

Would be a link showing the text "tooltipsy" and when you hover over it, it would show "Click here to go to the tooltipsy website" in a tooltip.

However, what if I want to put a linebreak inside the tooltip?

This code:

<a href="http://tooltipsy.com/" class="hastipy" title="Click here to <br /> go to the tooltipsy website">
     tooltipsy
</a>

returns a bunch of errors when you validate it at http://validator.w3.org

So I came up with this javascript/jQuery (written by Jason Gennaro):

$('a').each(function(){
    var a = $(this).attr('title');
    var b = a.replace('lineBreak','\n');
    $(this).attr('title', b);
});

this code uses a keyword (lineBreak in this case) and replaces it with \n(<-- linebreak?) so my code passes validation and still has the linebreak in it.

And this code works on jsfiddle (here is the example), but on my website inside the tooltip, it doesn't. It inserts the \n, but it doesn't remove the "lineBreak" like it's supposed to.

Can anyone offer an explanation for this or even a possible fix for it?

Note:
I don't want a suggestion for another tooltip method, tooltipsy is working perfectly for everything I need.

Result:
As it turns out, just using &lt;br /&gt; instead of <br /> worked perfectly.

Upvotes: 1

Views: 5226

Answers (1)

Rob W
Rob W

Reputation: 348992

Use a global replace call: .replace(/lineBreak/g,'\n');.

If you want to add <br /> in your title attribute, use: &lt;br /&gt; (html entities).

Also, JQuery automatically wraps the JavaScript inside $(document).ready(...). You should do the same:

$(document).ready(function(){
    //HTML-modifying code here.
});

Upvotes: 4

Related Questions