Bootstrap Tooltip 显示换行

    <a class="pink"  href="#"  data-toggle="tooltip" data-placement="left" data-html="true"  title="AA:123
BB:456">
                 <div class="table-cell"><i class="icon-hand-right"></i>

点击我                </a>
 <script type="text/javascript">
                  //tooltips
                  $(‘[data-toggle="tooltip"]‘).tooltip();
//                  $(".pink").tooltip({
//                      show: null,
//                      position: {
//                          my: "left top",
//                          at: "left bottom"
//                      },
//                      open: function (event, ui) {
//                          ui.tooltip.animate({ top: ui.tooltip.position().top+10}, "fast");
//                      }
//                  });
            </script>

换行问题

遇到换行,我们首先想到的是将”\n”替换成”<br/>”,我也是这么做的,可惜这在Tooltip中不管用。Tooltip直接把”<br/>”当作文字显示出来了。

jquery-ui-1.10.3.full.min.js  修改该类如下代码:

var i="ui-tooltip-"+s++,n=t("<div>")  改为 var i="ui-tooltip-"+s++,n=t("<pre>")

最后,均可实现html标签内title内容显示时换行。

换行代码符合分别为:
”和“

时间: 2024-08-05 00:38:31

Bootstrap Tooltip 显示换行的相关文章

bootstrap tooltip 显示提示信息

参照网上文档,是这样说的, <a data-toggle="tooltip" data-placement="top" title="这是要提示Tooltip文字">上方的 Tooltip</a> <script type="text/javascript"> $(function(){ var options={ animation:true, trigger:'hover' //触发to

扩展Bootstrap Tooltip插件使其可交互

最近在公司某项目开发中遇见一特殊需求,请笔者帮助,因此有了本文的插件.在前端开发中tooltip是一个极其常用的插件,它能更好向使用者展示更多的文档等帮助信息.它们通常都是一些静态文本信息.但同事他们的需求是需要动态交互,在文本信息中存在帮助网页的链接.如果使用常规tooltip,则在用户移出tooltip依赖DOM节点后,tooltip panel则将被隐藏.所以用户没有办法点击到这些交互链接. 所以我们期望:给用户一定的时间使得用户能够将鼠标从依赖节点移动到tooltip panel:并且如

使用【 ajax 】【 bootstrap 】显示出小窗口 详情内容 一些代码意思可以参考下一个文章

使用[ bootstrap ]显示出小窗口  详情内容 显示页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> &

[WPF]TextTrimming截断后,ToolTip显示完整信息

文本过长被截断后,用ToolTip显示完整信息. 文本未被截断,则不显示ToolTip. 值转换器: public class TrimmedTextBlockVisibilityConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) { if (value == nu

shell 字符太多,无法在一行显示,换行

注: 上面反斜杠后面没有空格. 记忆:   反斜杠后的字符将反斜杠替换. shell 字符太多,无法在一行显示,换行,布布扣,bubuko.com

JS实现alert中显示换行的方法

转自脚本之家: 这篇文章主要介绍了JS实现alert中显示换行的方法,实例分析了两种实现alert换行的实现技巧,非常简单实用,需要的朋友可以参考下 本文实例讲述了JS实现alert中显示换行的方法.分享给大家供大家参考,具体如下:先来介绍一种比较复杂的方法,但这种方法使用起来对所有型号的浏览器都能任意分辨: //浏览器类型判定 function getOs() {   if(navigator.userAgent.indexOf("MSIE")>0) {      return

使用tooltip显示jquery.validate.unobtrusive验证信息

通过重写CSS实现使用tooltip显示jquery.validate.unobtrusive验证信息,效果如图: 1. 在ViewModel中定义验证规则 [Display(Name = "纬度")] [Required(ErrorMessage = "{0}不能为空")] [RegularExpression(@"^\-?\d+(\.\d+)?$", ErrorMessage = "{0}格式不正确,请输入数值")] [R

用WPF实现在ListView中的鼠标悬停Tooltip显示

原文:用WPF实现在ListView中的鼠标悬停Tooltip显示 一.具体需求描述 在WPF下实现,当鼠标悬停在ListView中的某一元素的时候能弹出一个ToolTip以显示需要的信息. 二.代码实现 在.XMAL文件中 Code<Window.Resources> <DataTemplate x:Key="dataTemplateCheckBox"> <StackPanel Orientation="Horizontal">

如何根据后端数据的换行标记在前端页面显示换行

在实际业务场景中我们可能有这样的需求,将请求到的数据在前端显示换行,数据中有\n或者<br>的标记,但是在页面上显示可能并不是换行的效果. 1.后端数据中包含 \n 那我们请求到数据以后先要进行替换,把 \n替换为 <br>   str.replace(/\\n/gmi, '<br>') 2.html文件中使用 <pre></pre>标签进行包裹,就可以显示出换行的效果了. 3.在vue项目中可以直接使用v-html指令,不会作为vue模板进行编