9 * @class Roo.bootstrap.Popover
10 * @extends Roo.bootstrap.Component
11 * Bootstrap Popover 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 click || hover (or false to trigger manually)
16 * @cfg {String} over what (parent or false to trigger manually.)
17 * @cfg {Number} delay - delay before showing
20 * Create a new Popover
21 * @param {Object} config The config object
24 Roo.bootstrap.Popover = function(config){
25 Roo.bootstrap.Popover.superclass.constructor.call(this, config);
31 * After the popover show
33 * @param {Roo.bootstrap.Popover} this
38 * After the popover hide
40 * @param {Roo.bootstrap.Popover} this
46 Roo.extend(Roo.bootstrap.Popover, Roo.bootstrap.Component, {
48 title: 'Fill in a title',
52 trigger : 'hover', // hover
58 can_build_overlaid : false,
60 getChildContainer : function()
62 return this.el.select('.popover-content',true).first();
65 getAutoCreate : function(){
68 cls : 'popover roo-dynamic',
69 style: 'display:block',
75 cls : 'popover-inner',
83 cls : 'popover-content',
94 setTitle: function(str)
97 this.el.select('.popover-title',true).first().dom.innerHTML = str;
99 setContent: function(str)
102 this.el.select('.popover-content',true).first().dom.innerHTML = str;
104 // as it get's added to the bottom of the page.
105 onRender : function(ct, position)
107 Roo.bootstrap.Component.superclass.onRender.call(this, ct, position);
109 var cfg = Roo.apply({}, this.getAutoCreate());
113 cfg.cls += ' ' + this.cls;
116 cfg.style = this.style;
118 //Roo.log("adding to ");
119 this.el = Roo.get(document.body).createChild(cfg, position);
125 initEvents : function()
127 this.el.select('.popover-title',true).setVisibilityMode(Roo.Element.DISPLAY);
128 this.el.enableDisplayMode('block');
130 if (this.over === false) {
133 if (this.triggers === false) {
136 var on_el = (this.over == 'parent') ? this.parent().el : Roo.get(this.over);
137 var triggers = this.trigger ? this.trigger.split(' ') : [];
138 Roo.each(triggers, function(trigger) {
140 if (trigger == 'click') {
141 on_el.on('click', this.toggle, this);
142 } else if (trigger != 'manual') {
143 var eventIn = trigger == 'hover' ? 'mouseenter' : 'focusin';
144 var eventOut = trigger == 'hover' ? 'mouseleave' : 'focusout';
146 on_el.on(eventIn ,this.enter, this);
147 on_el.on(eventOut, this.leave, this);
158 toggle : function () {
159 this.hoverState == 'in' ? this.leave() : this.enter();
162 enter : function () {
164 clearTimeout(this.timeout);
166 this.hoverState = 'in';
168 if (!this.delay || !this.delay.show) {
173 this.timeout = setTimeout(function () {
174 if (_t.hoverState == 'in') {
181 clearTimeout(this.timeout);
183 this.hoverState = 'out';
185 if (!this.delay || !this.delay.hide) {
190 this.timeout = setTimeout(function () {
191 if (_t.hoverState == 'out') {
197 show : function (on_el)
200 on_el= (this.over == 'parent') ? this.parent().el : Roo.get(this.over);
204 this.el.select('.popover-title',true).first().dom.innerHtml = this.title;
205 if (this.html !== false) {
206 this.el.select('.popover-content',true).first().dom.innerHtml = this.html;
208 this.el.removeClass(['fade','top','bottom', 'left', 'right','in']);
209 if (!this.title.length) {
210 this.el.select('.popover-title',true).hide();
213 var placement = typeof this.placement == 'function' ?
214 this.placement.call(this, this.el, on_el) :
217 var autoToken = /\s?auto?\s?/i;
218 var autoPlace = autoToken.test(placement);
220 placement = placement.replace(autoToken, '') || 'top';
224 //this.el.setXY([0,0]);
226 this.el.dom.style.display='block';
227 this.el.addClass(placement);
229 //this.el.appendTo(on_el);
231 var p = this.getPosition();
232 var box = this.el.getBox();
237 var align = Roo.bootstrap.Popover.alignment[placement];
242 this.el.alignTo(on_el, align[0],align[1]);
243 //var arrow = this.el.select('.arrow',true).first();
244 //arrow.set(align[2],
246 this.el.addClass('in');
249 if (this.el.hasClass('fade')) {
253 this.hoverState = 'in';
255 this.fireEvent('show', this);
260 this.el.setXY([0,0]);
261 this.el.removeClass('in');
263 this.hoverState = null;
265 this.fireEvent('hide', this);
270 Roo.bootstrap.Popover.alignment = {
271 'left' : ['r-l', [-10,0], 'right'],
272 'right' : ['l-r', [10,0], 'left'],
273 'bottom' : ['t-b', [0,10], 'top'],
274 'top' : [ 'b-t', [0,-10], 'bottom']