jQuery Tooltipify
jQuery Tooltipify creates a slide in stylable tooltip to replace the default browser tooltip.
Please visit www.vicreative.nl for full documentation and demo.
Install
npm
npm install jquery-tooltipify Import the module:
import "jquery-tooltipify"; scss
import "jquery-tooltipify/src/tooltipify.scss"; css
import "jquery-tooltipify/lib/tooltipify.css"; Options
animationDuration
Sets the duration of the animation in miliseconds.
datatype: Integer
default: 100.
$("[title]").tooltipify({ animationOffset : 200 });animationOffset
Sets the offset used in the animation propery to animate for showing.
datatype: Integer
default: 50.
$("[title]").tooltipify({ animationDuration : 500 });animationProperty
Sets the propery to animate for showing. When left empty, no animation will take place.
datatype: String
default: "left".
possible values: All properties supported by the animate method of jQuery are allowed.
$("[title]").tooltipify({ animationProperty : "top" });content
Sets the content of the tooltip. This can be either text or html.
Note: When content is set, the title attribute will be ignored.
Note: When text is set, no html encoding will take place.
datatype: String
default: ""
$("span.tooltip").tooltipify({ content : "<div>my content</div>"});cssClass
Sets the class of the tooltipify container.
datatype: String
default: ""
$("span.tooltip").tooltipify({ cssClass : "tooltip-purple"});displayAware
Sets wheter the tooltip should be display aware. When set to true, the tooltip will be displayed on an other position (probably the opposite direction) when there is not enough space to display the tooltip.
datatype: Boolean
default: true
$("[title]").tooltipify({ displayAware : true });hideEvent
Sets the event that hides the tooltip.
datatype: String
default: "mouseout"
possible values: Any possible jQuery event or custom event.
$("[title]").tooltipify({ hideEvent : "blur" });offsetLeft
Sets an offset to the left.
datatype: Integer
default: 0
$("[title]").tooltipify({ offsetLeft : 10 });offsetTop
Sets an offset to the top.
datatype: Integer
default: 0
$("[title]").tooltipify({ offsetTop : 10 });opacity
Sets the final opacity of the tooltip. This will be faded in from 0.
datatype: Double
default: 0.8
$("[title]").tooltipify({ opacity : 1 });position
Sets the position of the tooltip.
datatype: String
default: "top"
possible values: "top", "left", "right", "bottom"
$("[title]").tooltipify({ position : "right" });showEvent
Sets the event that triggers the tooltip.
datatype: String
default: "mouseover"
possible values: Any possible jQuery event or custom event.
$("[title]").tooltipify({ showEvent : "click" });width
Sets a width to the tooltip.
datatype: Integer
default: null. The tooltip has the same height as its content.
$("[title]").tooltipify({ width : 200 });Events
hide
Hides the tooltip.
$("[title]").tooltipify("hide");show
Shows the tooltip.
$("[title]").tooltipify("show");destroy
Destroys the tooltipify element and unbinds all events.
$("[title]").tooltipify("destroy");Requirements
- jQuery 1.8.3+ (could also work on previous versions, but is not tested)
