OL-Balloon

click anywhere on the map or enter coordinates in decimal degrees  (balloon settings may be modified below)

Content may be a simple string or an HTML element for which additional styling can be specified with CSS.

Options	Value	Unit	Comment
Pointer Position	auto top-left top-center top-right bottom-left bottom-center bottom-right	text	"auto" chooses the best pointer position
Pointer Width		pixels	8 is the practical minimum...
Pointer Length		pixels	0 = no pointer (a simple popup)
Drop Shadow	true false	boolean
Auto Pan	true false	boolean	pans to make balloon visible
Auto Expand	true false	boolean	zooms out to make balloon visible
Auto Duration		milliseconds	0 = no map animation
Close Button	true false	boolean	inherits the balloon's corner radius
Fade	In Out	milliseconds	close button ignores fade out animation
Timeout		milliseconds	0 = no timeout (use close button)

Supported Styles	Value	Unit	Comment
max-width		any except %	include unit with number!
background-color		hex or rgba()	also the "X" color on the Close Button
border-color		hex or rgba()	also the color of the Close Button
border-width		pixels
border-radius		pixels
padding		pixels	applied on all 4 sides
font-family		text	leave blank to inherit a font
font-size		any	include unit with number!
font-style	normal italic	text
font-weight	lighter normal bold bolder	text
color		hex or rgba()
text-align	left center right	text	only relevant when max-width is set

The style properties shown above may be passed as an optional parameter to the balloon constructor or defined as a CSS rule using the .olBalloon class selector.  It is also possible to do both.  For example, the border width, radius and font could be defined in CSS while the border and background colors are set dynamically to match the balloon content; green for mountains, blue for lakes or whatever makes sense.

The complete constructor showing all of the OL-Balloon default values:

var balloon = new ol.Overlay.Balloon (
  { pointerPosition: "auto",
    pointerWidth: 12,
    pointerLength: 40,
    dropShadow: false,
    autoPan: false,
    autoExpand: true,
    autoDuration: 500,
    closeButton: false,
    fade: [0, 0],
    timeout: 0
  },
  { "max-width": "",
    "background-color": "#ffffff",
    "border-color": "#000000",
    "border-width": "1px",
    "border-radius": "4px",
    "padding": "5px",
    "font-family": "Verdana, Arial, sans-serif",
    "font-size": "auto",
    "font-style": "normal",
    "font-weight": "normal",
    "color": "#000000",
    "text-align": "center"
  }
);

Available methods:

balloon.show(coord, content);	coord = [long, lat] in projected units, content = string or HTML
balloon.hide();	fade-out animation is run
balloon.kill();	balloon is terminated immediately