qTip2 (tooltip) line break not working

问题:

I'm trying to add some line break to the text of the plugin qTip2 without any success.

So far I've tried <br/>, <p> and also white-space: pre-line without any success.

You can view a full example http://jsfiddle.net/6asMt/1/

I've been searching around the google but can't find anything that works. I would like my final result to be:

Date Start: 2014-04-08 10:00:00
Date End: 2014-04-10-10-00-00

And not

Date Start: 2014-04-08 10:00:00 Date End: 
2014-04-10-10-00-00

回答1:

Please check this JS Fiddle Code

JS Code:

$('a').each(function () {
    if ($(this).hasClass('qTip')) {
        var value = $(this).next('div:hidden').text();
        var title = $(this).attr('title');
        $('.qTip').qtip({
            style: {
                classes: 'qtip-bootstrap'
            },
            content: {
                title: title,
                //text: value // The problem is here (on the `text` option)
                text: $(this).next('div')[0].innerHTML
            }
        });
    }
});

If you have any other issue, then please add a comment below.

Regards D.

回答2:

Just use html() instead of text() in your code used to get tooltip value.

FIDDLE DEMO

回答3:

For anyone else that want the newline for the qtip, you can also use this:

<br/>

in your text. for example, you set the string that you want to display as below

$temp = "date begin: 1/8/2018<br/>date end: 2/8/2019";

The rest is still the same. qtip will recognize it and make a new line for it.