欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Bootstrap笔记(四) 博客分类: Coding bootstrap 

程序员文章站 2024-03-20 18:46:04
...

★:Tooltip

这个纯粹出于自己的需要。在form提交时要对各个控件进行有效验证,验证结果里的那些错误信息,希望能够用Tooltip来显示在控件的旁边。默认的黑底白字显得很别扭,不大合适。

由于Bootstrap本身没有开放这个接口,实现起来甚是麻烦。网上查下来,动态改颜色的,替换html模板的,改源码的...五花八门。最终选择了修改Bootstrap源代码的方式。因为我觉得这才是“应该的”模样,哈。

1. 修改Bootstrap的源码。在tooltip的applyPlacement方法中如下位置添加

...
$tip.offset(offset).addClass(placement).addClass('in');
// 添加css。@see http://*.com/questions/12170357/
if (this.options.cssClass) {
	$tip.addClass(this.options.cssClass);
}
...


2. 调用示例

field.tooltip({
	...
	cssClass : 'error',
	...
}).tooltip('show');


3. error的css请参考前面的内容。
效果图
Bootstrap笔记(四)
            
    
    博客分类: Coding bootstrap 
 
日文是因为在调试国际化。

Bootstrap笔记(三) Bootstrap笔记(五)

 

 

  • Bootstrap笔记(四)
            
    
    博客分类: Coding bootstrap 
  • 大小: 62.8 KB
相关标签: bootstrap