Simple Customizable Tooltip & Popover Plugin - Flyout

File Size: 8.48 KB
Views Total: 5501
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Simple Customizable Tooltip & Popover Plugin - Flyout

Flyout is a simple yet customizable jQuery plugin that helps you create popover- or tooltip-like floating popups attaching to any DOM elements. 

More features:

  • Can be triggered via either click/tap or hover events.
  • Custom position.
  • Fade-in and fade-out animations.
  • Supports html content.

Basic usage:

1. Include the jQuery flyout plugin's style sheet jquery.flyout.css in the head section of the html document.

<link rel="stylesheet" href="jquery.flyout.css">

2. Include the jQuery library and jQuery flyout plugin's JavaScript file jquery.flyout.js at the end of the html document.

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="jquery.flyout.js"></script>

3. Create a basic popover that is triggered by click.

$('#el').flyout({
  title: 'My Flyout',
  content: 'Content here'
});

4. Create a basic tooltip that is triggered on hover.

$('#el').flyout({
  title: 'My Flyout',
  content: 'Triggered on hover',
  trigger: 'manual'
}).mouseover(function() {
  $(this).flyout('show');
}).mouseout(function() {
  $(this).flyout('hide');
});

5. All configuration options.

// enable aniamtion
animation: true,

/**
 * The fixed width style of flyout area. If it is not specified, the width shrinks automatically
 * according to content width, but will not exceed the max-width defined in stylesheet.
 * @type {string}
 */
width: undefined,

/**
 * Title of this flyout, can be text or string returned by function.
 * If the title is empty, the title area will not appear intentionally.
 * @type {string|function|null}
 * @this jqueryObject - the jquery object of target to which the flyout attaching
 */
title: "",

/**
 * Contents of this flyout, can be html string or string returned by function.
 * @type {string|function}
 * @this jqueryObject - the jquery object of target to which the flyout attaching
 */
content: "",

/**
 * Indicates if content is HTML string or simple text. When it is true, contents will be
 * inserted by using $.html(), otherwise $.text()
 * @type {boolean}
 */
html: false,

/**
 * Indicates where to place the flyout, possible values are: "top", "bottom", "left", "right"
 * @type {string}
 */
placement: 'top',

/**
 * Indicates if the flyout is intended to be dismissed when the trigger is out of focus
 * @type {boolean}
 */
dismissible: false,

/**
 * The way triggers the showing of flyout, possible values are: "click" and "manual"
 * @type {string}
 */
trigger: 'click'

Change log:

2016-03-30

  • Support setting width of flyout

This awesome jQuery plugin is developed by nobelhuang. For more Advanced Usages, please check the demo page or visit the official website.