Popover.js

Summary

Popover.js is a jQuery plugin to provide simple yet fully customisable Popover. The javascript code snippets in this documentation with the green edge are runnable by clicking them.

Download

Download Popover.js including the pre-made bootstrap styled progress bar.

Basic Usage

Simple Popover

You can place popover on any element:

$('#example').fu_popover(options)

Popover Examples

Below are some examples of popover,click them to run.

Basic Popover

$('#example').fu_popover({content:'Hello !',placement:'left'});

Popover with Header

$('#example').fu_popover({content:'Hello !',placement:'top',title:'Alert'});

Popover with simple content

$('#example').fu_popover({content:'Hello !',placement:'left'});

Popover with Html Content

$('#example').fu_popover({content:'<p> Are you sure ?</p> <div>...',placement:'top',title:'Alert'})

Positioning

The placement string option is used to describe both vertical and horizontal alignment. Element notifications can be vertically repositioned to: "top" or "bottom" and horozontally repositioned to: "left" or "right". If we don't provide a placement option the default alignment is bottom.

$("#pos-demo").fu_popover({
  content:"I'm to the right of this box",
  placement:"right"
});

We can position the notification around this box

Use this positioning tool to see all possible position combinations.

An awesome cool larrrggggeeee box

API

`$("#elem-id").fu_popover(object);`

object - an options object

`$("#elem-id").fu_popover("show");`

show - Reveals an element popover

`$("#elem-id").fu_popover("hide");`

hide - Hides an element popover

`$("#elem-id").fu_popover("destroy");`

show - Hides and destroys an element popover

Options

Options can be passed using JavaScript.

Name	Type	Default	Description
arrowShow	boolean	true	If set to `false` hides popover arrow.
autoHide	boolean	false	If set to `true` hides popover automatically after `2500` milli seconds.
autoHideDelay	number	2500	If `autoHide` is set to `true`, hide popover after `autoHideDelay` ms.
content	string	''	Content to display on popover,can be any string or html content.
delay	object	0	Delay showing and hiding the popover (ms) Object structure is: `delay: { "show": 500, "hide": 100 }`
dismissable	boolean	false	If set to `true` hides popover on clicking outside popover.
placement	string	'bottom'	How to position the popover - top \| bottom \| left \| right
themeName	string	'default'	Styles the popup using provided `themeName`,you can create your own theme using our `Theme Roller` below.
title	string	''	Title to set for popover
trigger	string	'click'	How popover is triggered - `click \| hover \| focus \| manual`. You may pass multiple triggers; separate them with a space. manual cannot be combined with any other trigger.
width	string	'250px'	You can specify any width type supported by css(`% or px or pt` etc).

Theme Roller

box

Theme Name
Border Radius:	8
Border Color:
Header Color:
Header Bottom Color:
Header Text Color
Body Color
Arrow Color

Copy & paste below code into your html head or to your css file & pass this theme name as option to your popover themeName.

Example

$("#theme-demo").fu_popover({
    content:"Custom theme demo",
    placement:"top",
    themeName:'Theme_red',
    title:'Title'
});