Color Switcher

Thema Tooltips & Popover

Thema panel elements.

Tooltips & Popover

Animated popover ussing animate.css

Normal popover easing-in

 
Popover

Positioning

data-placement="top"
Top placement
data-placement="bottom"
Bottom placement
data-placement="right"
Right placement
data-placement="left"
Left placement

Just add attribute below to animate your popover.

data-easein="bounce"
bounce
data-easein="flash"
flash
data-easein="pulse"
pulse
data-easein="rubberBand"
rubberBand
data-easein="shake"
shake
data-easein="swing"
swing
data-easein="tada"
tada
data-easein="wobble"
wobble
data-easein="jello"
jello
data-easein="bounceIn"
bounceIn
data-easein="bounceInDown"
bounceInDown
data-easein="bounceInLeft"
bounceInLeft
data-easein="bounceInRight"
bounceInRight
data-easein="bounceInUp"
bounceInUp
data-easein="fadeInDown"
fadeInDown
data-easein="fadeInDownBig"
fadeInDownBig
data-easein="fadeInLeft"
fadeInLeft
data-easein="fadeInLeftBig"
fadeInLeftBig
data-easein="fadeInRight"
fadeInRight
data-easein="fadeInRightBig"
fadeInRightBig
data-easein="fadeInUp"
fadeInUp
data-easein="fadeInUpBig"
fadeInUpBig
data-easein="flip"
flip
data-easein="flipInX"
flipInX
data-easein="flipInY"
flipInY
data-easein="lightSpeedIn"
lightSpeedIn
data-easein="rotateIn"
rotateIn
data-easein="rotateInDownLeft"
rotateInDownLeft
data-easein="rotateInDownRight"
rotateInDownRight
data-easein="rotateInUpLeft"
rotateInUpLeft
data-easein="rotateInUpRight"
rotateInUpRight
data-easein="slideInUp"
slideInUp
data-easein="slideInDown"
slideInDown
data-easein="slideInLeft"
slideInLeft
data-easein="slideInRight"
slideInRight
data-easein="zoomIn"
zoomIn
data-easein="zoomInDown"
zoomInDown
data-easein="zoomInLeft"
zoomInLeft
data-easein="zoomInRight"
zoomInRight
data-easein="zoomInUp"
zoomInUp
data-easein="rollIn"
rollIn

Animated tooltip using animate.css

Normal Tooltip




Positioning Tooltip




Misc

  • data-animation="animated wobble"

    wobble
  • data-animation="animated hinge"

    hinge
  • data-animation="animated rollIn"

    rollIn
  • data-animation="animated flash"

    flash
  • data-animation="animated pulse"

    pulse
  • data-animation="animated shake"

    shake
  • data-animation="animated swing"

    swing
  • data-animation="animated tada"

    tada




Bounce





Fade





Flip

  • data-animation="animated flip"

    flip
  • data-animation="animated flipInX"

    flipInX
  • data-animation="animated flipInY"

    flipInY