jQuery Flyout

A jQuery plugin that provides additional content as a flyout.

GitHub Download

Add dynamic flyout content to almost any ui component. Take a look at examples below.

Example One

Hover over the div element to show additional with a flyout.

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum

Additional content for this product.

1. Create a container element, in this case a div.

<div><p>Donec id elit non mi porta gravida at eget metus.</p></div>

2. Create a second div as a child element with class fly.

<div><p>Donec id elit non mi porta gravida at eget metus.</p>
<div class="fly"><p>Additional content for this product.</p></div>
</div>

3. Initialize the plugin.

                    $("#flyExample01").initFlyout({
                       color: "#fff",
                       backgroundColor: "#999"
                    });

Example Two

A menu with flyouts for each item.

  • One
    Additional content for item one.
  • Two
    Additional content for item two.
  • Three
    Additional content for item three.

1. For components with multiple items such as menus, add a child div to each item.

<ul id="flyExample02" class="example-two">
<li>One<div class="fly">Additional content for item one.</div></li>
<li>Two<div class="fly">Additional content for item two.</div></li>
<li>Three<div class="fly">Additional content for item three.</div></li>
</ul>

2. Then iterate to initialize each item in the menu.

(In this example, the width of the flyout is specified to override the default setting of 100 pixels.)

$("#flyExample02").find("li").each(function () {
    $(this).initFlyout({
        color: "#000",
        backgroundColor: "#ccc",
        flyoutWidth: 200
    });
});