when you click on an empty space in Google Calender in order to add an event or when you click in an already placed event you will get a very nice popup having info about the event (please see attached image).

How can I create a similar pop up windows using CSS and Javascript (I prefer jQuery). I am also using Bootstrap if that helps.

Please notice that the popup position depends on where I will click so let's say that I have an html table and depending on which I will click the popup will be generated near to this position and will point to that specific .

Also notice the close behaviour (close button and if I click out of the popup it will close).

If there are more than one good answers I will accept the simplest one that works with jQuery (and jQuery UI) and Bootstrap - I'd grateful if not other frameworks were used.

Thanks !

when you click on an empty space in Google Calender in order to add an event or when you click in an already placed event you will get a very nice popup having info about the event (please see attached image).

How can I create a similar pop up windows using CSS and Javascript (I prefer jQuery). I am also using Bootstrap if that helps.

Please notice that the popup position depends on where I will click so let's say that I have an html table and depending on which I will click the popup will be generated near to this position and will point to that specific .

Also notice the close behaviour (close button and if I click out of the popup it will close).

If there are more than one good answers I will accept the simplest one that works with jQuery (and jQuery UI) and Bootstrap - I'd grateful if not other frameworks were used.

Thanks !

• javascript
• jquery
• css
• popup
• twitter-bootstrap

• 1 What have you tried? Stackoverflow isn't here to do your work for you, we can help you if you're stuck with something specific. – JaredMcAteer Commented Mar 23, 2012 at 17:21
• I believe that my question is specific enough ! I want to create popups ? How can I do it like google ? – Serafeim Commented Mar 23, 2012 at 18:30

5 Answers 5

There is a plugin called jquery tip-tip which might do what you are after. You essentially want to display some HTML above the area you have clicked. Tip-tip can display html as a 'bubble' above the point you have clicked. It's also easy to style. It is mainly used for tooltips but I see no reason why it can't be adapted to do this.

http://code.drewwilson./entry/tiptip-jquery-plugin

(p.s. you would need to use the 'content' property to set the content)

"content: string (false by default) - HTML or String to use as the content for TipTip. 
Will overwrite content from any HTML attribute."

I assume that you are talking regarding the tooltips here is link which will help you

http://jquerytools/demos/tooltip/index.html

http://coding.smashingmagazine./2007/06/12/tooltips-scripts-ajax-javascript-css-dhtml/

http://craigsworks./projects/qtip/

http://www.1stwebdesigner./css/stylish-jquery-tooltip-plugins-webdesign/

The other answers contained links about tooltips. However, I believe that a dialog ponent like the jQuery UI dialog would match your requirements better.

Perhaps this did not exist back in March when this question was asked, but current version of Bootstrap has popovers like the one in the question. See:

http://twitter.github./bootstrap/javascript.html#popovers

You can use FireBug to analyse the page and check the actual values for CSS properties (ie. what colour is the border, or how much padding is there).