Twitter Boostrap Popover like Popup for OpenLayers
BSD Like (see file)
- add the js file wherever you want
- add / include Twitter's Bootstrap 2.x css (see below)
- add this piece of CSS to your stylesheet
.popover-title span { display:block; float: left; width: 236px; }
- test and tweak both the CSS (width) and the dimension and delta properties in the js file
- In your script, when you want to create a popup, use the follong code
var popup = new OpenLayers.Popup.Popover( "popup", lonlat, "The popup content", "The popup title !", function(){ /* this is the close popup callback function */ } );
- enjoy
Include the latest version of Twitter's Bootstrap 2.x CSS in your project. Or add css/openlayerspopovers.css if you don't use Twitter's Bootstrap else where in your project.
In action, the popup looks like this : ![ ] (https://raw.github.com/Modulaweb/OpenLayers.Popup.Popover/master/example.png)