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 |
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.