CODEWITHSUNDEEP
javascriptjqueryhtmljquery-tooltip
Hei
Hei

Reputation: 513

Adding new line in jQuery tooltip plugin

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~

Upvotes: 0

Views: 3072

Answers (5)

Alberto Godar
Alberto Godar

Reputation: 249

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

Upvotes: 0

adek
adek

Reputation: 3121

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>

Upvotes: 0

kontur
kontur

Reputation: 5220

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/>");
    }
});

Upvotes: 1

nav
nav

Reputation: 3115

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.

Upvotes: 1

Paulius
Paulius

Reputation: 241

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>

Upvotes: 2

Related Questions