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

Pointer Positiontext "auto" chooses the best pointer position
Pointer Widthpixels 8 is the practical minimum...
Pointer Lengthpixels 0 = no pointer (a simple popup)
Drop Shadowboolean
Auto Panboolean pans to make balloon visible
Auto Expandboolean zooms out to make balloon visible
Auto Durationmilliseconds 0 = no map animation
Close Buttonboolean inherits the balloon's corner radius
Fade In Out milliseconds close button ignores fade out animation
Timeoutmilliseconds 0 = no timeout (use close button)

Supported StylesValueUnitComment
max-widthany except % include unit with number!
background-colorhex or rgba() also the "X" color on the Close Button
border-colorhex or rgba() also the color of the Close Button
paddingpixels applied on all 4 sides
font-familytext leave blank to inherit a font
font-sizeany include unit with number!
colorhex or rgba()
text-aligntext 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:, content); coord = [long, lat] in projected units, content = string or HTML
balloon.hide(); fade-out animation is run
balloon.kill(); balloon is terminated immediately