Lightweight Bootstrap-esque tooltip that doesn't require Bootstrap
Marionette Tooltip is a fully customisable plugin for use in web applications. It is written in BackboneJS but can be used in any front end environment.
The latest version of Marionette Tooltip is v0.1.0.
Backbone Tooltip requires:
Note: Backbone requires either Underscore or Lo-Dash so you will need to also include one of these manually if you are not installing with Bower.
Backbone Tooltip can be installed using Bower
$ bower install marionette-tooltipYou can clone the GitHub repository
$ git clone https://github.com/valerymercury/marionette-tooltipYou will need to include the stylesheet in the <head> of every page the tooltip will be used on:
<link rel="stylesheet" href="bower_components/marionette-tooltip/src/marionette-tooltip.css">Include the following scripts before the closing <head> tag
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/underscore/underscore.js"></script>
<script src="bower_components/backbone/backbone.js"></script>
<script src="bower_components/marionette-tooltip/src/marionette-tooltip.js"></script>Alter the paths above so they point to the correct locations in your file structure.
If you use the non-AMD version, the tooltip is instantiated by creating a new Backbone.Tooltip();
Add the data-bbtooltip attribute to any element that requires a tooltp:
<a href="#" data-bbtooltip="I am a tooltip">Click Me</a>Register the event handlers and create a new Tooltip instance:
$('[data-bbtooltip]').each(function(){
var $this = $(this);
$this.on('click', function(){
new Tooltip($this);
//non AMD - new Backbone.Tooltip($this);
});
});A full list of options that can be passed with data-attributes can be seen below.
A Backbone Tooltip can be instantiated by either passing an options hash or a jQuery element. If you use an options hash a jQuery element must be passed as the $el or an error will be thrown.
By default, the tooltip will be shown as soon as it is instantiated and destroyed once an element other than the target element or the tooltip is clicked, or the tab button pressed. If you use the tooltip in this way, you will need to create an event listener which creates a new Tooltip(options); when fired:
$(element).on('focus', function(){
new Tooltip({
$el: $jQueryObject,
text: 'This is the text that is displayed in the tooltip',
align: 'top',
context: 'info'
});
//or
new Tooltip($jqueryObject);
});To use custom triggers rather than Backbone events, instantiate a new Tooltip() for each tooltip element when the element is rendered and pass the options trigger: 'click|mouseenter|... and exit: 'click|mouseleave|...:
$(function(){
$('element.tooltip').each(function(){
new Tooltip({
$el: $(this);
text: 'This tooltip has custom listeners',
trigger: 'click',
exit: 'click'
});
});
});The Backbone Tooltip can be instantiated by passing an options hash new Tooltip(options) The following options are supported
{
$el: (jQuery Object) element, // required
text: (String) message, // default ''
rootElem: (jQuery Object) element, // default $('body')
align: (String) 'top|bottom|left|right', // default 'top'
context: (String)'info|success|warning|danger', // default ''
timeout: (Number) milliseconds, // default undefined
interrupt: (Boolean) interrupt, // default undefined
trigger: (String) event, // default undefined
exit: (String) event, // default undefined
speed: (Number) milliseconds, // default 200
feedback: (Boolean) requireFeedback, // default undefined
animation: (String) 'fade|slide|slidefade', // default 'fade'
id: (String) id, // default undefined
prefix: (String) prefixTheMessage, // default 'Info|Success|Warning|Danger' depending on context
distance: (Number) 50 // default 10 - distance to animate (only slidefade)
}Options can be configured on each element using HTML5 data-attributes. The following data-attributes are supported
<a href="#"
data-bbtooltip="This is the tooltip text"
data-bbtooltip-align="top"
data-bbtooltip-context="danger"
data-bbtooltip-timeout="3000"
data-bbtooltip-interrupt="true"
data-bbtooltip-trigger="click"
data-bbtooltip-exit="click"
data-bbtooltip-speed="200"
data-bbtooltip-prefix="Oops"
data-bbtooltip-distance="50"
data-bbtooltip-animation="slidefade"
data-bbtooltip-feedback="true">Click Me</a>You can see a variety of working examples by visiting the project page.