• bootstrap Tooltip换行问题


    bootstrap自身带有tooltip,使用起来很方便,但是美中不足,它的tooltip并不支持换行。
    比如我们通过<textarea>输入框传入到数据库的长文本,文本是带有换行符的,但是一旦使用tooltip将它展示出来,换行效果就不见了。
    实际上,这解决起来并不难。
    在bootstrap.js中,查询tooltip,先找到控制tooltip的代码大概在哪块,然后阅读。
    会找到这样一段代码:
     1 Tooltip.DEFAULTS = {
     2  animation: true,
     3  placement: 'top',
     4  selector: false,
     5  template: '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>',
     6  trigger: 'hover focus',
     7  title: '',
     8  delay: 0,
     9  html: false,
    10  container: false,
    11  viewport: {
    12  selector: 'body',
    13  padding: 0
    14  }
    15  }
    稍作调试,发现这确实是对tooltip的配置。
    然后将:
    template: '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>',
    修改为:
     template: '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><pre class="tooltip-inner"></pre></div>',
    也就是将原本用div标签包裹的内容,替换成用pre标签包裹,测试一看,确实OK了。
     
    对于一些框架的使用者来说,往往因为框架的代码复杂而且多,出现了问题之后不会或者不愿意去排查框架的问题。其实只要静下心去看,多数问题都是能解决的。
  • 相关阅读:
    正则表达式匹配中国区的电话号码
    落户
    存储过程与函数的区别转载
    asp.net页面从初始化到卸载事件顺序转
    .net连接Oracle数据库 常见问题
    sql触发器的类型
    (转) C++中extern “C”含义深层探索
    vmware 收缩越来越大的磁盘文件
    (转)一些常用的网站
    工具:P/Invoke Interop Assistant
  • 原文地址:https://www.cnblogs.com/east2-100/p/6106974.html
Copyright © 2020-2023  润新知