{"id":13500539,"url":"https://github.com/sandywalker/webui-popover","last_synced_at":"2026-02-22T15:03:05.906Z","repository":{"id":20067220,"uuid":"23335980","full_name":"sandywalker/webui-popover","owner":"sandywalker","description":"A lightWeight popover plugin with jquery ,enchance the popover plugin of bootstrap with some awesome new features","archived":false,"fork":false,"pushed_at":"2018-07-08T09:03:51.000Z","size":4303,"stargazers_count":887,"open_issues_count":72,"forks_count":231,"subscribers_count":53,"default_branch":"master","last_synced_at":"2025-03-15T12:08:56.066Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sandywalker.png","metadata":{"files":{"readme":"README.md","changelog":"HISTORY.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-08-26T02:28:04.000Z","updated_at":"2025-02-24T21:32:28.000Z","dependencies_parsed_at":"2022-08-23T15:30:26.911Z","dependency_job_id":null,"html_url":"https://github.com/sandywalker/webui-popover","commit_stats":null,"previous_names":[],"tags_count":42,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sandywalker%2Fwebui-popover","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sandywalker%2Fwebui-popover/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sandywalker%2Fwebui-popover/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sandywalker%2Fwebui-popover/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sandywalker","download_url":"https://codeload.github.com/sandywalker/webui-popover/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246155985,"owners_count":20732355,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-31T22:01:04.535Z","updated_at":"2025-10-22T21:28:00.686Z","avatar_url":"https://github.com/sandywalker.png","language":"HTML","readme":"WebUI-Popover\n=============\n\nA lightWeight popover plugin with jquery, enchance the  popover plugin of bootstrap with some awesome new features. It works well with bootstrap, but bootstrap is not necessary!\n\n\nBrowser compatibility: ie8+,Chrome,Safari,Firefox,Opera\n\n## Requirement\n\njquery1.7+\n\n##Features\n* fast,lightweight\n* support more placements\n* auto caculate placement\n* close button in popover\n* multipule popovers in same page\n* different styles\n* support url and iframe\n* support async mode\n* different animations\n* support backdrop\n\n\n##NPM\n```bash\n  npm install webui-popover\n```\n\n##Bower\n```bash\n  bower install webui-popover\n```\n\n##CDN\nWebUI Popover Support CDN from version 1.2.1, avaliable on [JSDELIVR](http://www.jsdelivr.com/?query=webui-popover)\n\n##Demo\n[WebUI Popover Demo](http://sandywalker.github.io/webui-popover/demo/)\n\n##Getting Started\n\n####Including it on your page\nLocalfile\n```html\n\u003clink rel=\"stylesheet\" href=\"jquery.webui-popover.css\"\u003e\n...\n\u003cscript src=\"jquery.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"jquery.webui-popover.js\"\u003e\u003c/script\u003e\n```\nOr CDN\n\n```html\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/jquery.webui-popover/1.2.1/jquery.webui-popover.min.css\"\u003e\n...\n\u003cscript src=\"https://cdn.jsdelivr.net/jquery/1.11.3/jquery.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/jquery.webui-popover/1.2.1/jquery.webui-popover.min.js\"\u003e\u003c/script\u003e\n```\n\n####Use the plugin as follows:\n\n```javascript\n$('a').webuiPopover(options);\n```\n\n####Some Examples:\n\n Simplest Popover\n```javascript\n$('a').webuiPopover({title:'Title',content:'Content'});\n```\n\n Create Popover by dom element data-* attribute\n```html\n\u003ca href=\"#\" data-title=\"Title\" data-content=\"Contents...\" data-placement=\"right\"\u003eshow pop\u003c/a\u003e\n```\n```javascript\n$('a').webuiPopover();\n```\n\n Popover  content can  be easily setted by next element with class 'webui-popover-content'\n ```html\n\u003ca href=\"#\" \u003eshop pop\u003c/a\u003e\n\u003cdiv class=\"webui-popover-content\"\u003e\n\t\u003cp\u003epopover content\u003c/p\u003e\n\u003c/div\u003e\n ```\n ```javascript\n$('a').webuiPopover();\n ```\n\n Or, just use jQuery selector (id selector recommended) to set the Popover content.\n\n ```html\n\u003ca href=\"#\" \u003eshop pop\u003c/a\u003e\n\u003cdiv id=\"myContent\"\u003e\n\t\u003cp\u003epopover content\u003c/p\u003e\n\u003c/div\u003e\n ```\n ```javascript\n$('a').webuiPopover({url:'#myContent'});\n ```\n\n Popover with specified placement.\n```javascript\n$('a').webuiPopover({title:'Title',content:'Content',placement:'bottom'});\n```\n\n Popover trigged by mouse hover.\n```javascript\n$('a').webuiPopover({content:'Content',trigger:'hover'});\n```\n\n Create Sticky Popover.\n```javascript\n$('a').webuiPopover({content:'Content',trigger:'sticky'});\n```\n\nCreate Popover Dynamically (by new option:'selector').\n\n```html\n\u003ca href=\"#\" id=\"addPop\" class=\"btn btn-default\"\u003e add Pop \u003c/a\u003e\n\u003cdiv class=\"pops\"\u003e\n      \n\u003c/div\u003e\n```\n\n```javascript\n $('#addPop').on('click',function(e){\n            $('\u003ca href=\"#\" class=\"show-pop data-placement=\"auto-bottom\"  data-title=\"Dynamic Title\" data-content=\"Dynamic content\"\u003e Dynamic created Pop \u003c/a\u003e').appendTo('.pops');\n        });\n```\n\n Popover with inversed style.\n```javascript\n$('a').webuiPopover({content:'Content',style:'inverse'});\n```\n Popover with fixed width and height\n```javascript\n$('a').webuiPopover({content:'Content',width:300,height:200});\n```\n\n Popover with close button\n```javascript\n$('a').webuiPopover({title:'Title',content:'Content',closeable:true});\n```\n\n Animate the Popover\n```javascript\n$('a').webuiPopover({title:'Title',content:'Content',animation:'pop'});\n```\n\n Popover with iframe\n```javascript\n$('a').webuiPopover({type:'iframe',url:'http://getbootstrap.com'});\n```\n\n\n Async Mode\n```javascript\n$('a').webuiPopover({\n\t\t\t\t\t\ttype:'async',\n\t\t\t\t\t\turl:'https://api.github.com/',\n\t\t\t\t\t\tcontent:function(data){\n \t\t\t\t\t\t\tvar html = '\u003cul\u003e';\n \t\t\t\t\t\t\tfor(var key in data){html+='\u003cli\u003e'+data[key]+'\u003c/li\u003e';}\n\t\t\t\t\t\t\thtml+='\u003c/ul\u003e';\n\t\t\t\t\t\t\treturn html;\n\t\t\t\t\t\t}\n \t\t\t\t\t});\n```\n\n Async simply by url\n ```javascript\n$('a').webuiPopover({\n\ttype:'async',\n\turl:'http://some.website/htmldata'\n});\n ```\n\n Trigger the Popover by manual\n```javascript\n //Initailize\n $('a').webuiPopover({trigger:'manual'});\n...\n\n //Show it\n $('a').webuiPopover('show');\n\n //Hide it\n $('a').webuiPopover('hide');\n\n```\n\nDestroy the Popover\n```javascript\n$('a').webuiPopover('destroy');\n```\n\n\n\n### Default options\n```javascript\n{\n    placement:'auto',//values: auto,top,right,bottom,left,top-right,top-left,bottom-right,bottom-left,auto-top,auto-right,auto-bottom,auto-left,horizontal,vertical\n    container: document.body,// The container in which the popover will be added (i.e. The parent scrolling area). May be a jquery object, a selector string or a HTML element. See https://jsfiddle.net/1x21rj9e/1/\n    width:'auto',//can be set with  number\n    height:'auto',//can be set with  number\n    trigger:'click',//values:  click,hover,manual(handle events by your self),sticky(always show after popover is created);\n    selector:false,// jQuery selector, if a selector is provided, popover objects will be delegated to the specified. \n    style:'',// Not to be confused with inline `style=\"\"`, adds a classname to the container for styling, prefixed by `webui-popover-`. Default '' (light theme), 'inverse' for dark theme\n    animation:null, //pop with animation,values: pop,fade (only take effect in the browser which support css3 transition)\n    delay: {//show and hide delay time of the popover, works only when trigger is 'hover',the value can be number or object\n        show: null,\n        hide: 300\n    },\n    async: {\n        type:'GET', // ajax request method type, default is GET\n        before: function(that, xhr, settings) {},//executed before ajax request\n        success: function(that, data) {}//executed after successful ajax request\n        error: function(that, xhr, data) {} //executed after error ajax request\n    },\n    cache:true,//if cache is set to false,popover will destroy and recreate\n    multi:false,//allow other popovers in page at same time\n    arrow:true,//show arrow or not\n    title:'',//the popover title, if title is set to empty string,title bar will auto hide\n    content:'',//content of the popover,content can be function\n    closeable:false,//display close button or not\n    direction:'', // direction of the popover content default is ltr ,values:'rtl';\n    padding:true,//content padding\n    type:'html',//content type, values:'html','iframe','async'\n    url:'',//if type equals 'html', value should be jQuery selecor.  if type equels 'async' the plugin will load content by url.\n    backdrop:false,//if backdrop is set to true, popover will use backdrop on open\n    dismissible:true, // if popover can be dismissed by  outside click or escape key\n    autoHide:false, // automatic hide the popover by a specified timeout, the value must be false,or a number(1000 = 1s).\n    offsetTop:0,  // offset the top of the popover\n    offsetLeft:0,  // offset the left of the popover\n    onShow: function($element) {}, // callback after show\n    onHide: function($element) {}, // callback after hide\n}\n```\n\n###Global Methods\n\n\nIn some situation, you may want to manipulate the plugin like 'show/hide' popovers by  global methods.  The new object **WebuiPopovers** is introduced and exposed to the global window object, so you can access these methods like 'WebuiPopovers.someMethod()...'. \n\nHere are examples of calling code.\n\n```javascript\n\n//Show Popover by click other element.\n$('a').on('click',function(e){\n\te.stopPropagation(); // Stop event propagation is needed, otherwise may trigger the document body click event handled by plugin.\n\tWebuiPopovers.show('#el');\n});\n\n// Show Popover with options\nWebuiPopovers.show('#el',{title:' hello popover',width:300});\n\n\n//Hide Popover by jQuery selector\nWebuiPopovers.hide('#el');\n\n//Hide All Popovers\nWebuiPopovers.hideAll();\n\n//Update the Popover content \nWebuiPopovers.updateContent('.btn-showpop','some html or text');\n\n\n//Update the Popover content  async\nWebuiPopovers.updateContentAsync('.btn-showpop','http://someUrl');\n\n//Set global default options\nWebuiPopovers.setDefaultOptions(options);\n```\n\nFull Methods\n\n```js\n \tWebuiPopovers.show(selector,options); // Show popover by jQuery selector,the  options parameter is optional\n\tWebuiPopovers.hide(selector); // Hide  popover by jQuery selector\n\tWebuiPopovers.hideAll(); // Hide all popovers\n\tWebuiPopovers.create(selector,options);// Create and init the popover by jQuery selector.\n\tWebuiPopovers.isCreated(selector); // Check if the popover is already create and bind to the selector.\n\tWebuiPopovers.updateContent(selector,newContent) //Update the Popover content after the popover is created.\n\tWebuiPopovers.updateContentAsync(selector,url) //Update the Popover content asynchronously after the popover is created.\n\tWebuiPopovers.setDefaultOptions(options) //Change the global default options.\n```\n\n\n\nWelcome to visit my github page: [http://sandywalker.github.io/]\n","funding_links":[],"categories":["HTML","Popper"],"sub_categories":["Others"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsandywalker%2Fwebui-popover","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsandywalker%2Fwebui-popover","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsandywalker%2Fwebui-popover/lists"}