blocks|key|1538142|text|只需在标题属性中使用实体代码&#013;换行即可。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1538143|entityMap^0|E|6|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

<p>Just use the entity code <code>&amp;#013;</code> for a linebreak in a title attribute.</p>


blocks|key|793201|text|只需添加一个数据属性|type|unstyled|depth|inlineStyleRanges|entityRanges|data|793202|793203|数据-html=“true”|blockquote|793204|793205|793206|你就可以走了。|793207|例如：用法：|793208|<i+data-html="true"+class="tooltip+ficon-help-icon"+twipsy-content-set="true"+data-original-title=+"<b>Hello</b>+Stackoverflow">+</i>|code-block|syntax|javascript|793209|到目前为止，它已经在我尝试过的大多数工具提示插件中起作用了。|793210|entityMap^0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|V|8|@]|9|@]|A|$]]|$1|C|3|D|5|E|7|W|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|X|8|@]|9|@]|A|$]]|$1|G|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|Z|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|10|8|@]|9|@]|A|$]]|$1|L|3|M|5|N|7|11|8|@]|9|@]|A|$O|P]]|$1|Q|3|R|5|6|7|12|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|T|$]]

<p>Just add a data attribute</p>
<blockquote>
<p>data-html=&quot;true&quot;</p>
</blockquote>
<p>and you're good to go.</p>
<p>Eg. usage:</p>
<pre><code>&lt;i data-html=&quot;true&quot; class=&quot;tooltip ficon-help-icon&quot; twipsy-content-set=&quot;true&quot; data-original-title= &quot;&lt;b&gt;Hello&lt;/b&gt; Stackoverflow&quot;&gt; &lt;/i&gt;
</code></pre>
<p>It has worked in majority of the tooltip plugins i have tried as of now.</p>


blocks|key|795160|text|&#013;结合了空格的风格:前行；适用于我。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|BOLD|entityRanges|data|795161|entityMap^0|0|6|9|9|0^^$0|@$1|2|3|4|5|6|7|I|8|@$9|J|A|K|B|C]|$9|L|A|M|B|D]]|E|@]|F|$]]|$1|G|3|-4|5|6|7|N|8|@]|E|@]|F|$]]]|H|$]]

<p>The <code>&amp;#013;</code> combined with the style <strong>white-space: pre-line;</strong> worked for me.</p>


blocks|key|2553713|text|这个CSS最终在我的编辑器中与换行符一起工作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2553714|.tooltip-inner+{
++++white-space:+pre-wrap;
}|code-block|syntax|javascript|2553715|点击此处：How+to+make+Twitter+bootstrap+tooltips+have+multiple+lines?|offset|length|2553716|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/13338780/how-to-make-twitter-bootstrap-tooltips-have-multiple-lines^0|0|0|5|1N|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>This CSS is what finally worked for me in conjunction with a linefeed in my editor:</p>

<pre class="lang-css prettyprint-override"><code>.tooltip-inner {
    white-space: pre-wrap;
}
</code></pre>

<p>Found here:
<a href="https://stackoverflow.com/questions/13338780/how-to-make-twitter-bootstrap-tooltips-have-multiple-lines">How to make Twitter bootstrap tooltips have multiple lines?</a></p>


blocks|key|3962129|text|\n|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|3962130|使用样式|unstyled|3962131|.tooltip-inner+{
++++white-space:+pre-line;
}|3962132|对我很管用。|3962133|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$B|C]]|$1|I|3|J|5|F|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|F|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<pre><code>\n
</code></pre>

<p>with the styling</p>

<pre><code>.tooltip-inner {
    white-space: pre-line;
}
</code></pre>

<p>worked for me.</p>


blocks|key|3961977|text|在文本之间加上\n。它可以在所有浏览器上运行。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3961978|Example+
img.tooltip=+"+Your+Text+:+\n"
img.tooltip+%2B=+"+Your+text+\n";|code-block|syntax|javascript|3961979|这对我来说是可行的，并且在后台代码中使用。|3961980|希望这对你有用|3961981|entityMap^0|7|2|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|D|@]|E|$]]|$1|M|3|N|5|6|7|V|8|@]|D|@]|E|$]]|$1|O|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|P|$]]

<p>Give <code>\n</code> between the text. It work on all browsers.</p>

<pre><code>Example 
img.tooltip= " Your Text : \n"
img.tooltip += " Your text \n";
</code></pre>

<p>This will work for me and it's used in code behind.</p>

<p>Hope this will work for you</p>


blocks|key|795090|text|我找到了。只需这样做就可以做到。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|795091|<a+ref="#"+title="First+Line
++++++++++++++++++Second+Line
++++++++++++++++++Third+line">Hover+Me</a>|code-block|syntax|javascript|795092|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I found it. It can be done by simply doing like this</p>

<pre><code>&lt;a ref="#" title="First Line
                  Second Line
                  Third line"&gt;Hover Me&lt;/a&gt;
</code></pre>


blocks|key|795249|text|javascript版本|type|unstyled|depth|inlineStyleRanges|entityRanges|data|795250|因为&#013;+(html)是0D+(十六进制)，所以这可以表示为'\u000d'|offset|length|style|CODE|795251|str+=+str.replace(/\n/g,+'\u000d');|code-block|syntax|javascript|795252|此外,|795253|与大家分享AngularJS+filter，由于other+answers中的引用，它将\n替换为该字符|BOLD|795254|app.filter('titleLineBreaker',+function+()+{
++++return+function+(str)+{
++++++++if+(!str)+{
++++++++++++return+str;
++++++++}

++++++++return+str.replace(/\n/g,+'\u000d');
++++};
});|795255|用法|795256|<div+title="{{+message+%7C+titleLineBreaker+}}">+</div>|795257|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/9118551/3191896^0|0|2|6|G|2|Y|8|0|0|0|5|G|18|2|O|D|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|15|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|16|8|@$D|17|E|18|F|G]|$D|19|E|1A|F|G]|$D|1B|E|1C|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|1D|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|1E|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|1F|8|@$D|1G|E|1H|F|Q]|$D|1I|E|1J|F|G]]|9|@$D|1K|E|1L|1|1M]]|A|$]]|$1|R|3|S|5|J|7|1N|8|@]|9|@]|A|$K|L]]|$1|T|3|U|5|6|7|1O|8|@]|9|@]|A|$]]|$1|V|3|W|5|J|7|1P|8|@]|9|@]|A|$K|L]]|$1|X|3|-4|5|6|7|1Q|8|@]|9|@]|A|$]]]|Y|$Z|$5|10|11|12|A|$13|14]]]]

<h1>The javascript version</h1>
<p>Since <code>&amp;#013;</code> (html) is <code>0D</code> (hex), this can be represented as <code>'\u000d'</code></p>
<pre><code>str = str.replace(/\n/g, '\u000d');
</code></pre>
<h3>In addition,</h3>
<p>Sharing with you guys an <strong>AngularJS filter</strong> that replaces <code>\n</code> with that character thanks to the references in the <a href="https://stackoverflow.com/a/9118551/3191896">other answers</a></p>
<pre><code>app.filter('titleLineBreaker', function () {
    return function (str) {
        if (!str) {
            return str;
        }

        return str.replace(/\n/g, '\u000d');
    };
});
</code></pre>
<p>usage</p>
<pre><code>&lt;div title=&quot;{{ message | titleLineBreaker }}&quot;&gt; &lt;/div&gt;
</code></pre>


blocks|key|2554060|text|只需在标题中使用\n并添加此css|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2554061|.tooltip-inner+{
++++white-space:+pre-wrap;
}|code-block|syntax|javascript|2554062|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>just use \n in title and add this css</p>

<pre><code>.tooltip-inner {
    white-space: pre-wrap;
}
</code></pre>


blocks|key|1538154|text|如果您使用的是qTip，那么&lt;br+/&gt;确实可以工作|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1538155|entityMap^0|E|C|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

<p><code>&amp;lt;br /&amp;gt;</code> did work if you are using qTip</p>


blocks|key|3962117|text|只需添加data-html="true“|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3962118|<a+href="#"+title="Some+long+text+<br/>+Second+line+text+\n+Third+line+text"+data-html="true">Hover+me</a>|code-block|syntax|javascript|3962119|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Just add data-html="true"</p>

<pre><code>&lt;a href="#" title="Some long text &lt;br/&gt; Second line text \n Third line text" data-html="true"&gt;Hover me&lt;/a&gt;
</code></pre>


blocks|key|3961676|text|只需将title属性分布在多行中，就可以在原生HTML工具提示中添加换行符。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3961677|但是，我推荐使用Q-Tip：http://craigsworks.com/projects/qtip/这样的jQuery工具提示插件。|offset|length|3961678|它的设置和使用都很简单。另外，也有很多免费的javascript工具提示插件。|3961679|编辑:对第一条语句进行更正。|3961680|entityMap|0|LINK|mutability|MUTABLE|url|http://craigsworks.com/projects/qtip/^0|0|E|11|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@$D|T|E|U|1|V]]|A|$]]|$1|F|3|G|5|6|7|W|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|X|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|Q]]]]

<p>it is possible to add linebreaks within native HTML tooltips by simply having the title attribute spread over mutliple lines.</p>

<p>However, I'd recommend using a jQuery tooltip plugin such as Q-Tip: <a href="http://craigsworks.com/projects/qtip/" rel="nofollow noreferrer">http://craigsworks.com/projects/qtip/</a>.</p>

<p>It is simple to set up and use. Alternatively there are a lot of free javascript tooltip plugins around too.</p>

<p>edit: correction on first statement.</p>


blocks|key|793092|text|对我来说，一个两步解决方案(格式化标题和添加样式的组合)起作用了，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|793093|1)格式化title属性：|offset|length|style|CODE|793094|<a+ref="#"+title="First+Line
++++++++++++++++++Second+Line
++++++++++++++++++Third+line">Hover+Me</a>|code-block|syntax|javascript|793095|2)将此样式添加到tips元素中：|793096|white-space:+pre-line;|793097|在IE8、Firefox22和Safari5.1.7中测试。|793098|entityMap^0|0|5|5|0|0|9|4|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@$D|W|E|X|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|Y|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|Z|8|@$D|10|E|11|F|G]]|9|@]|A|$]]|$1|O|3|P|5|J|7|12|8|@]|9|@]|A|$K|L]]|$1|Q|3|R|5|6|7|13|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|T|$]]

<p>For me, a 2-step solution (combination of formatting the title and adding the style) worked, as follows:</p>

<p>1) Format the <code>title</code> attrbiute:</p>

<pre class="lang-html prettyprint-override"><code>&lt;a ref="#" title="First Line
                  Second Line
                  Third line"&gt;Hover Me&lt;/a&gt;
</code></pre>

<p>2) Add this style to the <code>tips</code> element:</p>

<pre class="lang-css prettyprint-override"><code>white-space: pre-line;
</code></pre>

<p>Tested in IE8, Firefox 22, and Safari 5.1.7.</p>


blocks|key|795422|text|您可以使用bootstrap工具提示，并且不要忘记将html选项设置为true。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|795423|<div+id="tool">+tooltip</div>|code-block|syntax|javascript|795424|$('#tool').tooltip({
+++++title:+'line+one'+%2B'<br+/>'%2B+'line+two',
+++++html:+true
});|795425|<link+rel="stylesheet"+href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script+src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>|795426|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|O|8|@]|9|@]|A|$E|F]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>You can use bootstrap tooltip, and don't forget to set the html option to true.</p>

<pre><code>&lt;div id="tool"&gt; tooltip&lt;/div&gt;
</code></pre>

<pre><code>$('#tool').tooltip({
     title: 'line one' +'&lt;br /&gt;'+ 'line two',
     html: true
});
</code></pre>

<pre><code>&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"&gt;
&lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"&gt;&lt;/script&gt;
</code></pre>


blocks|key|2553628|text|如果您使用的是Javascript+jquery工具提示工具，那么在"jquery-ui.js“Javascript文件中找到以下文本：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2553629|tooltip.find(".ui-tooltip-content").html(content);|code-block|syntax|javascript|2553630|更重要的是|2553631|content=content.replace(/\&lt;/g,'<').replace(/\&gt;/g,'>');|2553632|我希望这也能为你工作。|2553633|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>Well if you are using <strong>Jquery Tooltip utility</strong>, then in "jquery-ui.js" Javascript file find following text:</p>

<pre><code>tooltip.find(".ui-tooltip-content").html(content);
</code></pre>

<p>and put above that</p>

<pre><code>content=content.replace(/\&amp;lt;/g,'&lt;').replace(/\&amp;gt;/g,'&gt;');
</code></pre>

<p>I hope this will also work for you.</p>


blocks|key|1538391|text|只需在脚本中添加以下代码片段：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1538392|++++$(function+()+{
++++++++$('[data-toggle="tooltip"]').tooltip()
++++});|code-block|syntax|javascript|1538393|当然，正如上面提到的答案，data-html应该是"true"。这将允许您在title属性值中使用html标记和格式。|offset|length|style|CODE|1538394|entityMap^0|0|0|D|9|P|6|12|5|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]|$I|T|J|U|K|L]|$I|V|J|W|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|N|$]]

<p>Just add this code snippet in your script:</p>

<pre><code>    $(function () {
        $('[data-toggle="tooltip"]').tooltip()
    });
</code></pre>

<p>and ofcourse as mentioned in above answers the <code>data-html</code> should be <code>"true"</code>. This will allow you to use html tags and formatting inside the value of <code>title</code> attribute.  </p>


blocks|key|3962379|text|因此，如果您使用的是bootstrap4，那么这将会起作用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3962380|<style>
+++.tooltip-inner+{
++++white-space:+pre-wrap;
+++}

</style>

<script>+
++++$(function+()+{
++++++$('[data-toggle="tooltip"]').tooltip()
++++})
</script>

<a+data-toggle="tooltip"+data-placement="auto"+title="+first+line+&#010;+next+line"+href=+"">+Hover+me+</a>|code-block|syntax|javascript|3962381|如果你在Django项目中使用，那么我们也可以在工具提示中显示动态数据，比如：|3962382|<a+class="black-text+pb-2+pt-1"+data-toggle="tooltip"+data-placement="auto"++title="{{+post.location+}}+&#010;+{{+post.updated_on+}}"+href=+"{%25+url+'blog:get_user_profile'+post.author.id+%25}">{{+post.author+}}</a>|3962383|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>So if you are using bootstrap4 then this will work.</p>

<pre><code>&lt;style&gt;
   .tooltip-inner {
    white-space: pre-wrap;
   }

&lt;/style&gt;

&lt;script&gt; 
    $(function () {
      $('[data-toggle="tooltip"]').tooltip()
    })
&lt;/script&gt;

&lt;a data-toggle="tooltip" data-placement="auto" title=" first line &amp;#010; next line" href= ""&gt; Hover me &lt;/a&gt;
</code></pre>

<p>If you are using in Django project then we can also display dynamic data in tooltips like:</p>

<pre><code>&lt;a class="black-text pb-2 pt-1" data-toggle="tooltip" data-placement="auto"  title="{{ post.location }} &amp;#010; {{ post.updated_on }}" href= "{% url 'blog:get_user_profile' post.author.id %}"&gt;{{ post.author }}&lt;/a&gt;
</code></pre>


blocks|key|1541673|text|我的解决方案是http://jqueryui.com/tooltip/：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1541674|这里的代码(使<br/>工作的脚本部分是"content:")：|style|CODE|1541675|HTML头|1541676|<head+runat="server">
++++<script+src="../Scripts/jquery-2.0.3.min.js"></script>
++++<link+href="Content/themes/base/jquery-ui.css"+rel="stylesheet"+/>
++++<script+src="../Scripts/jquery-ui-1.10.3.min.js"></script>
<script>
++++/*Position:
++++++my+=>++at
++++++at+=>+element*/
++++$(function+()+{
++++++++$(document).tooltip({
++++++++++++content:+function()+{
++++++++++++++++var+element+=+$(+this+);
++++++++++++++++if+(+element.is(+"[title]"+)+)+{
++++++++++++++++++++return+element.attr(+"title"+);
++++++++++++++++}

++++++++++++},
++++++++++++position:+{+my:+"left+bottom-3",+at:+"center+top"+}+});
++++});
</script>
</head>|code-block|syntax|javascript|1541677|ASPX或HTML控件|1541678|<asp:TextBox+ID="Establecimiento"+runat="server"+Font-Size="1.3em"+placeholder="Establecimiento"+title="Texto+1.<br/>TIP:+texto+2"></asp:TextBox>|1541679|希望这能帮助到某人|1541680|entityMap|0|LINK|mutability|MUTABLE|url|http://jqueryui.com/tooltip/^0|7|S|0|0|7|5|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@$A|13|B|14|1|15]]|C|$]]|$1|D|3|E|5|6|7|16|8|@$A|17|B|18|F|G]]|9|@]|C|$]]|$1|H|3|I|5|6|7|19|8|@]|9|@]|C|$]]|$1|J|3|K|5|L|7|1A|8|@]|9|@]|C|$M|N]]|$1|O|3|P|5|6|7|1B|8|@]|9|@]|C|$]]|$1|Q|3|R|5|L|7|1C|8|@]|9|@]|C|$M|N]]|$1|S|3|T|5|6|7|1D|8|@]|9|@]|C|$]]|$1|U|3|-4|5|6|7|1E|8|@]|9|@]|C|$]]]|V|$W|$5|X|Y|Z|C|$10|11]]]]

<p>The solution for me was <a href="http://jqueryui.com/tooltip/" rel="nofollow">http://jqueryui.com/tooltip/</a>: </p>

<p>And here the code (the part of script that make <code>&lt;br/&gt;</code> Works  is "content:"):</p>

<p>HTML HEAD</p>

<pre><code>&lt;head runat="server"&gt;
    &lt;script src="../Scripts/jquery-2.0.3.min.js"&gt;&lt;/script&gt;
    &lt;link href="Content/themes/base/jquery-ui.css" rel="stylesheet" /&gt;
    &lt;script src="../Scripts/jquery-ui-1.10.3.min.js"&gt;&lt;/script&gt;
&lt;script&gt;
    /*Position:
      my =&gt;  at
      at =&gt; element*/
    $(function () {
        $(document).tooltip({
            content: function() {
                var element = $( this );
                if ( element.is( "[title]" ) ) {
                    return element.attr( "title" );
                }

            },
            position: { my: "left bottom-3", at: "center top" } });
    });
&lt;/script&gt;
&lt;/head&gt;
</code></pre>

<p>ASPX or HTML control</p>

<pre><code>&lt;asp:TextBox ID="Establecimiento" runat="server" Font-Size="1.3em" placeholder="Establecimiento" title="Texto 1.&lt;br/&gt;TIP: texto 2"&gt;&lt;/asp:TextBox&gt;
</code></pre>

<p>Hope this help someone</p>


blocks|key|1538233|text|比Jquery+UI+1.10更高的版本不支持在title属性中使用html标记，因为它不是有效的html。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1538234|因此，替代解决方案是使用工具提示内容选项。Refer+-+http://api.jqueryui.com/tooltip/#option-content|offset|length|1538235|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jqueryui.com/tooltip/#option-content^0|0|T|1B|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@$D|P|E|Q|1|R]]|A|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|M]]]]

<p>Grater than Jquery UI 1.10 is not support to use html tag inside of the title attribute because its not valid html.</p>

<p>So the alternative solution is to use tooltip content option.
Refer - <a href="http://api.jqueryui.com/tooltip/#option-content" rel="nofollow">http://api.jqueryui.com/tooltip/#option-content</a></p>


blocks|key|3961996|text|使用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3961997|&#013|code-block|syntax|javascript|3961998|不应该有任何；字符。|3961999|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Use </p>

<pre class="lang-html prettyprint-override"><code>&amp;#013
</code></pre>



<p>There shouldn't be any ; character.  </p>


blocks|key|795272|text|如果您使用的是jquery-ui+1.11.4：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|795273|var+tooltip+=+$.widget(+"ui.tooltip",+{
++++version:+"1.11.4",
++++options:+{
++++++++content:+function()+{
++++++++++++//+support:+IE<9,+Opera+in+jQuery+<1.7
++++++++++++//+.text()+can't+accept+undefined,+so+coerce+to+a+string
++++++++++++var+title+=+$(+this+).attr(+"title"+)+%7C%7C+"";
++++++++++++//+Escape+title,+since+we're+going+from+an+attribute+to+raw+HTML
Replace-->++//return+$(+"<a>"+).text(+title+).html();
by+-->++++++return+$(+"<a>"+).html(+title+);
+++++++++++++},|code-block|syntax|javascript|795274|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>if you are using jquery-ui 1.11.4:</p>

<pre><code>var tooltip = $.widget( "ui.tooltip", {
    version: "1.11.4",
    options: {
        content: function() {
            // support: IE&lt;9, Opera in jQuery &lt;1.7
            // .text() can't accept undefined, so coerce to a string
            var title = $( this ).attr( "title" ) || "";
            // Escape title, since we're going from an attribute to raw HTML
Replace--&gt;  //return $( "&lt;a&gt;" ).text( title ).html();
by --&gt;      return $( "&lt;a&gt;" ).html( title );
             },
</code></pre>


blocks|key|795313|text|AngularJS+with+Bootstrap+UI+Tolltip+(uib-tooltip),+has+three+versions+of+tool-tip:|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|795314|uib-tooltip、uib-tooltip-template和uib-tooltip-html|unstyled|795315|-+uib-tooltip+takes+only+text+and+will+escape+any+HTML+provided
-+uib-tooltip-html+takes+an+expression+that+evaluates+to+an+HTML+string
-+uib-tooltip-template+takes+a+text+that+specifies+the+location+of+the+template|795316|在我的例子中，我选择了uib-tooltip-html，它有三个部分：|offset|length|style|BOLD|795317|795318|configuration|ordered-list-item|795319|controller|795320|HTML|795321|795322|示例：|795323|(function(angular)+{

//Step+1:+configure+$sceProvider+-+this+allows+the+configuration+of+$sce+service.

angular.module('myApp',+['uib.bootstrap'])
+++++++.config(function($sceProvider)+{
+++++++++++$sceProvider.enabled(false);
+++++++});

//Step+2:+Set+the+tooltip+content+in+the+controller

angular.module('myApp')
+++++++.controller('myController',+myController);

myController.$inject+=+['$sce'];

function+myController($sce)+{
++++var+vm+=+this;
++++vm.tooltipContent+=+$sce.trustAsHtml('I+am+the+first+line+<br+/><br+/>'+%2B
+++++++++++++++++++++++++++++++++++++++++'I+am+the+second+line-break');

++++return+vm;
}

+})(window.angular);

//Step+3:+Use+the+tooltip+in+HTML+(UI)

<div+ng-controller="myController+as+get">
+++++<span+uib-tooltip-html="get.tooltipContent">other+Contents</span>
</div>|795324|欲了解更多信息，请访问|795325|entityMap^0|0|0|0|B|G|0|0|0|0|0|0|0|3|0|0|0^^$0|@$1|2|3|4|5|6|7|15|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|16|8|@]|9|@]|A|$]]|$1|G|3|H|5|6|7|17|8|@]|9|@]|A|$B|C]]|$1|I|3|J|5|F|7|18|8|@$K|19|L|1A|M|N]]|9|@]|A|$]]|$1|O|3|-4|5|F|7|1B|8|@]|9|@]|A|$]]|$1|P|3|Q|5|R|7|1C|8|@]|9|@]|A|$]]|$1|S|3|T|5|R|7|1D|8|@]|9|@]|A|$]]|$1|U|3|V|5|R|7|1E|8|@]|9|@]|A|$]]|$1|W|3|-4|5|F|7|1F|8|@]|9|@]|A|$]]|$1|X|3|Y|5|F|7|1G|8|@$K|1H|L|1I|M|N]]|9|@]|A|$]]|$1|Z|3|10|5|6|7|1J|8|@]|9|@]|A|$B|C]]|$1|11|3|12|5|F|7|1K|8|@]|9|@]|A|$]]|$1|13|3|-4|5|F|7|1L|8|@]|9|@]|A|$]]]|14|$]]

<pre><code>AngularJS with Bootstrap UI Tolltip (uib-tooltip), has three versions of tool-tip:
</code></pre>

<p><em>uib-tooltip, uib-tooltip-template and uib-tooltip-html</em></p>

<pre><code>- uib-tooltip takes only text and will escape any HTML provided
- uib-tooltip-html takes an expression that evaluates to an HTML string
- uib-tooltip-template takes a text that specifies the location of the template
</code></pre>

<p><em>In my case, I opted for <strong>uib-tooltip-html</strong> and there are three parts to it:</em></p>

<ol>
<li>configuration</li>
<li>controller</li>
<li>HTML</li>
</ol>

<p><strong>Example:</strong></p>

<pre><code>(function(angular) {

//Step 1: configure $sceProvider - this allows the configuration of $sce service.

angular.module('myApp', ['uib.bootstrap'])
       .config(function($sceProvider) {
           $sceProvider.enabled(false);
       });

//Step 2: Set the tooltip content in the controller

angular.module('myApp')
       .controller('myController', myController);

myController.$inject = ['$sce'];

function myController($sce) {
    var vm = this;
    vm.tooltipContent = $sce.trustAsHtml('I am the first line &lt;br /&gt;&lt;br /&gt;' +
                                         'I am the second line-break');

    return vm;
}

 })(window.angular);

//Step 3: Use the tooltip in HTML (UI)

&lt;div ng-controller="myController as get"&gt;
     &lt;span uib-tooltip-html="get.tooltipContent"&gt;other Contents&lt;/span&gt;
&lt;/div&gt;
</code></pre>

<p><em>For more information, please check <a href="https://hassantariqblog.wordpress.com/2017/03/24/angularjs-add-line-break-or-html-elements-in-angular-bootstrap-ui-tooltip/" rel="nofollow noreferrer">here</a></em></p>


blocks|key|2553973|text|使用.html()而不是.text()对我很有效。例如|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2553974|.html("This+is+a+first+line."+%2B+"<br/>"+%2B+"This+is+a+second+line.")|code-block|syntax|javascript|2553975|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Using .html() instead of .text() worked for me. For example</p>

<pre><code>.html("This is a first line." + "&lt;br/&gt;" + "This is a second line.")
</code></pre>


blocks|key|1538364|text|使用&#13;应该可以(我已经在Chrome，Firefox和Edge上测试过了)：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|BOLD|entityRanges|data|1538365|​|1538366|let+users+=+[{username:+'user1'},+{username:+'user2'},+{username:+'user3'}];
let+favTitle+=+'';
for(let+j+=+0;+j+<+users.length;+j%2B%2B)
++++favTitle+%2B=+users[j].username+%2B+"&#13;";

$("#item").append('<i+title="In+favorite+users:+&#13;'+%2B+favTitle+%2B+'">Favorite</i>');|code-block|syntax|javascript|1538367|<script+src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div+id+=+item></div>|1538368|1538369|entityMap^0|2|5|G|6|N|7|V|4|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|D]|$9|X|A|Y|B|D]|$9|Z|A|10|B|D]]|E|@]|F|$]]|$1|G|3|H|5|6|7|11|8|@]|E|@]|F|$]]|$1|I|3|J|5|K|7|12|8|@]|E|@]|F|$L|M]]|$1|N|3|O|5|K|7|13|8|@]|E|@]|F|$L|M]]|$1|P|3|H|5|6|7|14|8|@]|E|@]|F|$]]|$1|Q|3|-4|5|6|7|15|8|@]|E|@]|F|$]]]|R|$]]

<p>use <code>&amp;#13;</code> should work (I've tested in <strong>Chrome</strong>, <strong>Firefox</strong> and <strong>Edge</strong>):</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>let users = [{username: 'user1'}, {username: 'user2'}, {username: 'user3'}];
let favTitle = '';
for(let j = 0; j &lt; users.length; j++)
    favTitle += users[j].username + "&amp;#13;";

$("#item").append('&lt;i title="In favorite users: &amp;#13;' + favTitle + '"&gt;Favorite&lt;/i&gt;');</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;div id = item&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1541839|text|只需在标题属性中使用实体代码&#xA;换行即可。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1541840|​|1541841|<a+title="First+Line+&#xA;Second+Line">Hover+Me+</a>|code-block|syntax|javascript|1541842|1541843|entityMap^0|E|5|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|S|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|T|8|@]|D|@]|E|$K|L]]|$1|M|3|G|5|6|7|U|8|@]|D|@]|E|$]]|$1|N|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|O|$]]

<p>Just use the entity code <code>&amp;#xA;</code> for a linebreak in a title attribute.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a title="First Line &amp;#xA;Second Line"&gt;Hover Me &lt;/a&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1541883|text|Hi这段代码可以在所有浏览器中运行！！我用的是|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|1541884|用于chrome和safari中新行的和用于IE的ul+li|1541885|+function+genarateMultiLIneCode(){
++++++++var+=values["a","b","c"];
++++++++const+liStart+=+'<li>';
++++++++++++++const+liEnd+=+'</li>';
++++++++++++++const+bullet+=+'&#8226;+';+++++
++++++++++++++var+mergedString+=+'+';
++++++++++++++const+unOrderListStart='<ul>'
++++++++++++++const+unOrderListEnd='</ul>'
++++++++++++++const+fakeNewline+=+'&#013;&#010;';
++++++++++++++for+(let+i+=+0;+i+<+values.length;+i%2B%2B)+{
+++++++++++++++++++mergedString+%2B=+liStart+%2B+bullet+%2B+values[i]+%2B+liEnd+%2B+fakeNewline;
++++++++++++++}
++++++++++++++const+tempElement+=+document.createElement("div");
++++++++++++++tempElement.innerHTML+=+unOrderListStart+%2B+mergedString+%2B+unOrderListEnd;++++
++++++++++++++return+tempElement.innerText;
++++++++++++}
++++++++}|code-block|syntax|javascript|1541886|entityMap^0|0|N|0|J|5|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|R|8|@$9|S|A|T|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|U|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|N|$]]

<p><strong>Hi this code will work in all browser !!i used &#013;&#010; for new line in chrome and safari and ul li for IE</strong> </p>

<pre><code> function genarateMultiLIneCode(){
        var =values["a","b","c"];
        const liStart = '&lt;li&gt;';
              const liEnd = '&lt;/li&gt;';
              const bullet = '&amp;#8226; ';     
              var mergedString = ' ';
              const unOrderListStart='&lt;ul&gt;'
              const unOrderListEnd='&lt;/ul&gt;'
              const fakeNewline = '&amp;#013;&amp;#010;';
              for (let i = 0; i &lt; values.length; i++) {
                   mergedString += liStart + bullet + values[i] + liEnd + fakeNewline;
              }
              const tempElement = document.createElement("div");
              tempElement.innerHTML = unOrderListStart + mergedString + unOrderListEnd;    
              return tempElement.innerText;
            }
        }
</code></pre>


blocks|key|1538412|text|这个css将会帮助你。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1538413|++++.tooltip+{
++++++word-break:+break-all;
++++}

or+if+you+want+in+one+line

++++.tooltip-inner+{
++++++max-width:+100%25;
++++}|code-block|syntax|javascript|1538414|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>This css will help you.</p>

<pre><code>    .tooltip {
      word-break: break-all;
    }

or if you want in one line

    .tooltip-inner {
      max-width: 100%;
    }

</code></pre>


<p>How can line breaks be added within a HTML tooltip?</p>

<p>I tried using <code>&lt;br/&gt;</code> and <code>\n</code> within the tooltip as follows: </p>

<pre><code>&lt;a href="#" title="Some long text &lt;br/&gt; Second line text \n Third line text"&gt;Hover me&lt;/a&gt;
</code></pre>

<p>However, this was useless and I could see the literal text <code>&lt;br/&gt;</code> and <code>\n</code> within the tooltip. Any suggestions will be helpful.</p>


Add line break within tooltips

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

如何在HTML工具提示中添加换行符？我尝试在工具提示中使用<br/>和\n，如下所示：<a href="#" title="Some long text <br/> Second line text \n Third line text">Hover me</a>但是，这是没有用的，我可以在工具提示中看到文字文本<br/>和\n。任何建议都会很有帮助。

问在工具提示内添加换行符
EN

回答 27

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在工具提示内添加换行符EN

回答 27

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在工具提示内添加换行符
EN