提示框

Hover 提示

鼠标移上去显示提示信息

<span class="btn" data-rel="tooltip" data-placement="top" title="" data-original-title="Top Danger">Top</span>

* data-rel="tooltip"                //必须
* data-placement="top"              //top、left、right、bottom 显示位置
* data-original-title="Top Danger"  //显示信息

Click 提示

点击显示提示信息

<span class="btn btn-sm" data-rel="popover" data-placement="top" title="" data-content="content" data-original-title="Default">Default</span>

* data-rel="popover"                //必须
* data-placement="top"              //top、left、right、bottom 显示位置
* data-original-title="Top Danger"  //标题
* data-content="content"            //内容

通知提醒

Jquery Gritter 第三方组件 https://github.com/jboesch/Gritter/

Javascript 调用： 绑定 dom 元素的 id 或 class

//点击绑定的元素显示
$('#gritter-regular').click(function(){
      $.gritter.add({
          //标题
          title: 'This is a regular notice!', 
          //内容
          text: 'This will fade out after a certain amount of time. Vivamus eget tincidunt velit. Cum sociis natoque penatibus et <a href="#" class="blue">magnis dis parturient</a> montes, nascetur ridiculus mus.',
          //图片
          image: $path_assets+'/avatars/avatar1.png',
          //是否一直显示，除非手动关闭
          sticky: false,
          //消失时间，单位ms，sticky: false时有效
          time: '',
          /**
          * 提示框样式 class
          * gritter-light //添加该属性显示淡色，否则为较重色
          * gritter-info、gritter-success、btn-danger、btn-warning、btn-primary、btn-inverse //提示框背景色，默认为灰色，可选择这六种之一
          * gritter-center //提示框居中显示，默认显示在右侧
          */
          class_name: 'gritter-info gritter-center'
      });

      return false;
  });
  //清除页面所有 notifications
  $("#gritter-remove").click(function(){
      $.gritter.removeAll();
      return false;
  });