qTip2（工具提示）换行符不起作用答案

【问题标题】：qTip2 (tooltip) line break not workingqTip2（工具提示）换行符不起作用
【发布时间】：2014-08-04 11:12:58
【问题描述】：

我正在尝试在插件 qTip2 的文本中添加一些换行符，但没有成功。

到目前为止，我已经尝试过<br/>、<p> 和white-space: pre-line，但都没有成功。

我一直在谷歌搜索，但找不到任何有用的东西。我希望我的最终结果是：

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

不是

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

【问题讨论】：

标签： jquery line-breaks qtip2

【解决方案1】：

只需在用于获取工具提示值的代码中使用 html() 而不是 text()。

FIDDLE DEMO

【讨论】：

【解决方案2】：

对于其他想要 qtip 换行符的人，您也可以使用：

<br/>

在您的文本中。例如，您将要显示的字符串设置如下

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

其余的还是一样的。 qtip 将识别它并为其创建一个新行。

【讨论】：

【解决方案3】：

请查看JS Fiddle Code

JS代码：

$('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
            }
        });
    }
});

如果您有任何其他问题，请在下面添加评论。

问候 D.

【讨论】：

嗨，首先谢谢。我实际上还有另一个问题，但我不知道是否需要为此创建另一个主题。即使日期不同，工具提示也将始终显示最后一个。 jsfiddle.net/8LFfL/1