如何在HTML工具提示中添加换行符?
我尝试在工具提示中使用<br/>和\n,如下所示:
<a href="#" title="Some long text <br/> Second line text \n Third line text">Hover me</a>
然而,这是无用的,我可以在工具提示中看到文字<br/>和\n。任何建议都会很有帮助。
如何在HTML工具提示中添加换行符?
我尝试在工具提示中使用<br/>和\n,如下所示:
<a href="#" title="Some long text <br/> Second line text \n Third line text">Hover me</a>
然而,这是无用的,我可以在工具提示中看到文字<br/>和\n。任何建议都会很有帮助。
当前回答
我的解决方案是http://jqueryui.com/tooltip/:
这里的代码(脚本中使<br/>工作的部分是"content:"):
HTML头
<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>
ASPX或HTML控件
<asp:TextBox ID="Establecimiento" runat="server" Font-Size="1.3em" placeholder="Establecimiento" title="Texto 1.<br/>TIP: texto 2"></asp:TextBox>
希望这对大家有所帮助
其他回答
只需添加data-html="true"
<a href="#" title="Some long text <br/> Second line text \n Third line text" data-html="true">Hover me</a>
只需在标题中使用\n并添加这个CSS
.tooltip-inner {
white-space: pre-wrap;
}
只需使用实体代码
用于标题属性中的换行符。
只需在脚本中添加以下代码片段:
$(function () {
$('[data-toggle="tooltip"]').tooltip()
});
当然如上所述,data-html的答案应该是“真”。这将允许您在title属性的值内使用html标记和格式。
对我来说,两步解决方案(结合格式化标题和添加样式)是有效的,如下所示:
1) title属性的格式:
<a ref="#" title="First Line
Second Line
Third line">Hover Me</a>
2)在tips元素中添加如下样式:
white-space: pre-line;
在IE8、Firefox 22和Safari 5.1.7中测试。