★:Tooltip
这个纯粹出于自己的需要。在form提交时要对各个控件进行有效验证,验证结果里的那些错误信息,希望能够用Tooltip来显示在控件的旁边。默认的黑底白字显得很别扭,不大合适。
由于Bootstrap本身没有开放这个接口,实现起来甚是麻烦。网上查下来,动态改颜色的,替换html模板的,改源码的...五花八门。最终选择了修改Bootstrap源代码的方式。因为我觉得这才是“应该的”模样,哈。
1. 修改Bootstrap的源码。在tooltip的applyPlacement方法中如下位置添加
... $tip.offset(offset).addClass(placement).addClass('in'); // 添加css。@see http://stackoverflow.com/questions/12170357/ if (this.options.cssClass) { $tip.addClass(this.options.cssClass); } ...
2. 调用示例
field.tooltip({ ... cssClass : 'error', ... }).tooltip('show');
3. error的css请参考前面的内容。
效果图
日文是因为在调试国际化。
相关推荐
bootstrap笔记Bootstrap 移动设备优先。 所有列默认都是左浮动 为确保适当的绘制和触屏缩放,加入下面的meta标签
bootstrap作为目前主流框架之一,会使用这个框架会使你更快速开发响应式web、移动端web!
李炎恢Bootstrap讲义笔记 李炎恢Bootstrap讲义笔记 李炎恢Bootstrap讲义笔记
bootstrap笔记总结
bootstrap一些笔记
bootstrap学习笔记-html5 各类简单案例,适合初学者
这是李恢弘老师教bootstrap视频的讲义,我好不容易找到的,免费分享出来资源共享,让大家快速学习bootstrap
tutorials point 原版bootstrap教程,带有笔记
Bootstrap笔记[收集].pdf
bootstrap笔记(每一个知识点都有单独的示例)非常全,容易上手,学习bootstrap的利器
自己整理的bootstrap学习笔记,非常值得拥有,需要的朋友,可以下载学习。
李炎恢bootstrap 讲义笔记代码全套,李炎恢 bootstrap 讲义 代码
李炎恢Bootstrap讲义笔记解压.zip
bootstrap5全套笔记
前端Bootstrap+Es6+vue学习笔记
Bootstrap 笔记 学习 教程 学习总结 有的class类等是官网上还没介绍的