• 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了。
     
    对于一些框架的使用者来说,往往因为框架的代码复杂而且多,出现了问题之后不会或者不愿意去排查框架的问题。其实只要静下心去看,多数问题都是能解决的。
  • 相关阅读:
    skydriver 工具 SDExplorer
    微软出手了:Live Office与Google 文档大PK
    4§7 二次曲面的直纹性
    5§4 二次曲线的直径
    5§5 二次曲线的主直径
    AI第四章 计算智能(1)
    矩阵理论 第五讲 对角化与Jordan标准形
    矩阵理论第 四讲 矩阵的对角化
    5§7 二次曲线方程的化简与分类
    矩阵论 ppt
  • 原文地址:https://www.cnblogs.com/east2-100/p/6106974.html
Copyright © 2020-2023  润新知