How can I create a pop up like the one Google Calendar uses ?


Tags: javascript,jquery,css,popup,twitter-bootstrap

Problem :

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 !

Google calendar popup



Solution :

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


    CSS Howto..

    How to create desktop widgets [closed]

    HTML/CSS - How to position my image to the right so that it can be aligned with my text on the left?

    Flexslider - How to make two slider functioning together (images and a paragraph text) using a single directionNav?

    Right side border gradient only with the newer webkit gradient syntax, also which browsers support this, and how to do it in those as well?

    How to fix this cell in the GridView?

    How to create a template for randomising pictures and quotes without correspondence?

    How would you switch focus to an input text upon clicking an item on a dropdown menu?

    How does *, *:after, *:before work?

    How to style a PHP generated label?

    How to make a smooth transition for css controlled by jQuery?

    How to make a table with no cells-per-row defined only with CSS

    How to add new property within existing css?

    How to dynamically change CSS class of DIV tag?

    How to increase the font size of one word only in the line?

    How to organize css files in a Joomla 2.5 template? [closed]

    How To Use CSS To Add Multiple Fonts In One Paragraph And How To Add Multiple CSS Properties To One CSS Id?

    How to translate this Silverlight control into HTML/CSS/JS

    How to display icon with text in html with the help of css?

    How can I use css files in django?

    How to Make a Pentagram with CSS Border Attributes

    :hover property overriden after jquery effect, how to get it back?

    How to replace @media (max-width) using Stylish or Greasemonkey?

    Slide Up on Services Pages & Slider Not Working/Showing

    How to change radio button place & add line separator

    How to hide show image link on top of another image link

    CakePHP call really old css file. How to refresh

    How do you disable horizontal scrolling on a webpage?

    How to make link change the css in the following page [closed]

    How to apply CSS to navigation bar with master pages?

    Weird css box-sizing in bootstrap 3. How to get rid of horizontal slider