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(){
46 style: 'display:block',
52 cls : 'popover-inner',
60 cls : 'popover-content',
71 // as it get's added to the bottom of the page.
72 onRender : function(ct, position)
74 Roo.bootstrap.Component.superclass.onRender.call(this, ct, position);
76 var cfg = Roo.apply({}, this.getAutoCreate());
80 cfg.cls += ' ' + this.cls;
83 cfg.style = this.style;
85 this.el = Roo.get(document.body).createChild(cfg, position);
90 initEvents : function()
92 this.el.select('.popover-title',true).setVisibilityMode(Roo.Element.DISPLAY);
93 this.el.setVisibilityMode(Roo.Element.DISPLAY);
98 if (this.triggers === false) {
101 var on_el = (this.over == 'parent') ? this.parent().el : Roo.get(this.over);
102 var triggers = this.trigger.split(' ');
103 Roo.each(triggers, function(trigger) {
105 if (trigger == 'click') {
106 this.on_el.on('click', this.toggle, this);
107 } else if (trigger != 'manual') {
108 var eventIn = trigger == 'hover' ? 'mouseenter' : 'focusin'
109 var eventOut = trigger == 'hover' ? 'mouseleave' : 'focusout'
111 this.on_el.on(eventIn ,this.enter, this);
112 this.$element.on(eventOut, this.leave, this);
123 toggle : function () {
124 this.hoverState == 'in' ? this.leave() : this.enter();
127 enter : function () {
130 clearTimeout(this.timeout);
132 this.hoverState = 'in'
134 if (!this.delay || !this.delay.show) {
139 this.timeout = setTimeout(function () {
140 if (_t.hoverState == 'in') {
146 clearTimeout(this.timeout);
148 this.hoverState = 'out'
150 if (!this.delay || !this.delay.hide) {
155 this.timeout = setTimeout(function () {
156 if (_t.hoverState == 'out') {
162 show : function (on_el)
165 on_el= (this.over == 'parent') ? this.parent().el : Roo.get(this.over);
168 this.el.select('.popover-title').dom.innerHtml = this.title;
169 if (this.html !== false) {
170 this.el.select('.popover-content',true).dom.innerHtml = this.title;
172 this.el.removeClass('fade top bottom left right in');
173 if (!this.title.length) {
174 this.el.select('.popover-title',true).hide();
177 var placement = typeof this.placement == 'function' ?
178 this.placement.call(this, this.el, on_el) :
181 var autoToken = /\s?auto?\s?/i;
182 var autoPlace = autoToken.test(placement);
184 placement = placement.replace(autoToken, '') || 'top';
188 this.el.setXY([0,0]);
190 this.el.addClass(placement);
192 this.el.appendTo(on_el);
194 var p = this.getPosition();
195 var box = this.el.getBox();
201 this.el.alignTo(on_el, placement[0]);
204 this.hoverState = null;
206 if (this.el.hasClass('fade')) {
214 this.removeClass('in');