扩展Bootstrap Tooltip插件使其可交互的方法
发布时间:2016-11-25 17:29:37  所属栏目:教程  来源:站长网 
            导读:本文实例讲述了扩展Bootstrap Tooltip插件使其可交互的方法。分享给大家供大家参考,具体如下: 最近在公司某项目开发中遇见一特殊需求,请笔者帮助,因此有了本文的插件。在前端开发中tooltip是一个极其常用的插件,它能更好向使用者展示更多的文档等帮助
                
                
                
            | JavaScript 代码: 
(function(global, $){
  var page = function(){
  };
  page.prototype.bootstrap = function(){
    var html = 'Weclome to my blog lt;a target="_blank" href="greengerong.github.io"gt;破狼博客lt;/agt;!lt;input type="text" placeholder="input some thing"/gt;';
    $('#tooltip').tooltip( {
      html: true,
      placement: 'top',
      title: html
    });
    $('#delayTooltip').delayTooltip( {
      html: true,
      placement: 'bottom',
      title: html
    });
 $('#delayTooltipInHtml').attr('title', html).delayTooltip();
 return this;
};
   global.Page = page;
})(this, jQuery);
$(function(){
  'use strict';
 var page = new window.Page().bootstrap();
  //
});
这款插件既支持jQuery在HTML中声明属性的方式,同时也可以在javascript中使用。效果如下: 
 希望本文所述对大家基于bootstrap的程序设计有所帮助。 (编辑:宣城站长网) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! | 



