9 * @class Roo.bootstrap.Popover
10 * @extends Roo.bootstrap.Component
11 * Bootstrap Element class
12 * @cfg {String} html contents of the popover (or false to use children..)
13 * @cfg {String} title of popover (or false to hide)
14 * @cfg {String} placement how it is placed
15 * @cfg {String} trigger (or false to trigger manually)
16 * @cfg {String} over what (parent or false to trigger manually.)
19 * Create a new Popover
20 * @param {Object} config The config object
23 Roo.bootstrap.Popover = function(config){
24 Roo.bootstrap.Popover.superclass.constructor.call(this, config);
27 Roo.extend(Roo.bootstrap.Popover, Roo.bootstrap.Component, {
29 title: 'Fill in a title',
37 getChildContainer : function()
39 return this.el.select('.popover-content',true).first();
42 getAutoCreate : function(){
51 cls : 'popover-inner',
59 cls : 'popover-content',
70 // as it get's added to the bottom of the page.
71 onRender : function(ct, position)
73 Roo.bootstrap.Component.superclass.onRender.call(this, ct, position);
75 var cfg = Roo.apply({}, this.getAutoCreate());
79 cfg.cls += ' ' + this.cls;
82 cfg.style = this.style;
84 this.el = Roo.get(document.body).createChild(cfg, position);
89 initEvents : function()
91 this.el.select('.popover-title',true).setVisibilityMode(Roo.Element.DISPLAY);
95 if (this.triggers = false) {
101 show : function (on_el)
104 on_el= (this.over == 'parent') ? this.parent().el : Roo.get(this.over);
107 this.el.select('.popover-title').dom.innerHtml = this.title;
108 if (this.html !== false) {
109 this.el.select('.popover-content',true).dom.innerHtml = this.title;
111 this.el.removeClass('fade top bottom left right in');
112 if (!this.title.length) {
113 this.el.select('.popover-title',true).hide();