Get new jQuery plugins just once a week

×

ggtooltip-js

FavoriteLoadingAdd to favorites

March 10, 2015

Gigagit Tooltip | A jQuery Plugin for dynamic tooltips with API

ggTooltip-js is a jQuery Plugin to create interactive tooltips with API built on Twitter Bootstrap.
It’s a simple jQuery tooltip plugin extended from Twitter Bootstrap’s tooltip plugin that support 4 positions, background color, font color and border color without using images.

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-backcolor="".

Name type default description
animation boolean true apply a CSS fade transition to the tooltip
html boolean false Insert HTML into the tooltip. If false, jQuery’s text method will be used to insert content into the DOM. Use text if you’re worried about XSS attacks.
placement string | function ‘top’ how to position the tooltip – top | bottom | left | right | auto.
When “auto” is specified, it will dynamically reorient the tooltip. For example, if placement is “auto left”, the tooltip will display to the left when possible, otherwise it will display right.
selector string false If a selector is provided, tooltip objects will be delegated to the specified targets.
title string | function default title value if title attribute isn’t present
backcolor string ‘#000000’ Color name or Hex-code for setting the background color.
textcolor string ‘#ffffff’ Color name or Hex-code for setting the font color.
bordercolor string ‘#ffffff’ Color name or Hex-code for setting the border color.
trigger string ‘hover focus’ how tooltip is triggered – click | hover | focus | manual. You may pass multiple triggers; separate them with a space.
delay number | object 0 delay showing and hiding the tooltip (ms) – does not apply to manual trigger type

If a number is supplied, delay is applied to both hide/show

Object structure is: delay: { show: 500, hide: 100 }

Created by gigagit.com

Download

Example

ggtooltip-js jQuery plugin

dynamic hover tooltips

ggtooltip-js

Related posts:

wikiUp
Toolbar-js
Tooltipster
ggtooltip-js jQuery plugin

http://jquer.in/wp-content/uploads/2015/03/ggtooltip-js.jpg

jQuery plugin

Sign up for our weekly newsletter.

* We won't spam you ever