0

I am now using jQuery tooltip plugin to create some quick reminders for users during data input. Here is the jQuery tooltip I am using: http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/

However, I have encountered a problem. How can I add a new line in the body of the tooltip?

I have tried the following codes, but still cannot get it done.

<a href="Local Number: 2255-1234 \n Foreign Number:" id="TelephoneGuide" title="Data Input Example:">?</a>
<a href="Local Number: 2255-1234 &#010; Foreign Number:" id="TelephoneGuide" title="Data Input Example:">?</a>

So could anyone help me on this issue?

Thanks~

1
  • Are you sure you want that text in the href attribute? Browsers won't usually accept that as a valid URL.
    – Emyr
    Jan 4, 2012 at 9:05

5 Answers 5

2

I think

<br/>

should do the trick.

For example:

<a href="Local Number: 2255-1234 <br/> Foreign Number:" id="TelephoneGuide" title="Data Input Example:">?</a>
2
  • 1
    Have you tried your HTML. You can't put tags in HTML attributes.
    – Samich
    Jan 4, 2012 at 9:05
  • I am quite surprised on this method because it works perfectly. I haven't even thought about it before, like what Samich said before, normally we can't put tags in HTML attributes, but I think jQuery UI somehow handle that for me. Anyway, you rock! Paulius.
    – Hei
    Jan 5, 2012 at 1:18
1

Do you mean a line break? I'd recommend using a CSS rule to add a margin to the anchor tag. Else insert some <br />'s between the 2 a tags.

1
  • CSS is one of my greatest enemies when doing web-based development. However I think I should give it a try on your method. Thanks.
    – Hei
    Jan 5, 2012 at 1:23
1

You could "encode" your line breaks and use the bodyHandler attribute, like:

The documentation shows examples of linking to a #id in the href, which will display the content of that #id. So place a element with your and #id somewhere on your page, and specifiy that as the tooltip, like:

<a id="yourLink" href="Hello#world">Some text</a>

$("#yourLink").tooltip({ 
    bodyHandler: function() { 
        var href_value = $(this).attr("href");
        return href_value.replace("#","<br/>");
    }
});
0
0

I'm using it this way (jQuery 1.9 and standard tooltip function):

$(".myClass").tooltip({
    content: function() {
        return $(this).attr('title');
    }
})

And then in the title you can use HTML

Example:

<span title="Line1 <br> Line 2 <br> <b>Bold</b><br>">(?)</span>
0

You can't just paste the HTML as string, as other people said you have to use content.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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