Y.Tipsy

Contextual Tooltips and popovers

Y.Tipsy is a YUI widget for easy tooltips and popovers.

Fork from Github

Getting Started

You can get Y.Tipsy from the YUI Gallery.


    YUI({
        gallery: 'gallery-2013.03.20-19-59'
    }).use('gallery-tipsy', function (Y) { 
        //Y.Tipsy is loaded and good to go.
    });

Usage

Y.Tipsy is a Y.Widget subclass that lets you easily create tooltips. Each instantiation renders a single tooltip and can support multiple HTML elements. For example, lets say you have this HTML:


    Hover to show tooltip
    This tooltip will be positioned to my right.

You can set up a single Y.Tipsy instance to handle both of these:


                
    var tipsy = new Y.Tipsy({
        selector: "[rel='tipsy']"
    });

    tipsy.render();

Under the hood

Y.Tipsy is built using the following Widget Extensions:

As a result, it has all the attributes that are exposed by these extensions in addition to those provided by Y.Widget.

Pointing to a node

The WidgetPointer extension exposes a placement attribute that lets you position the tooltip relative to an HTML node. The possible values are "above", "below", "left", and "right".

You can do this via JavaScript:


    var tipsy = new Y.Tipsy({
        selector: "[rel='tipsy']",
        placement: 'above' //the tooltip will be above the content, with the pointer facing down.
    });

    tipsy.render();

Or you can do it through the data-placement data attribute.


    Hover to show tooltip

Setting Content

Content can be set either through the data-content HTML attribute, or through the content ATTR.


        var tipsy = new Y.Tipsy({
            selector: "[rel='tipsy']",
            content: "Here's some content I want to show."
        });

        tipsy.render();

Delegating

Under the hood, Y.Tipsy creates a single listener to listen for events on multiple nodes. It does this through a delegate attribute. If one is not supplied, it resorts to using the document. An event listener is set on the delegate, and the supplied selector is passed in as a filter.

Setting Events

To set events on Y.Tipsy, use the showOn and hideOn attributes. By default, the tooltip will show on ['mouseover', 'touchstart', 'focus'], and will hide on ['mouseout', 'touchend', 'blur']. You can customize that pretty easily. Let's say you want a Y.Tipsy that you want to show and hide on click:


    var clickTipsy = new Y.Tipsy({
        selector: "[rel='click-tipsy']",
        showOn: { selector: '#topbutton', events: 'click' },
        hideOn: { selector: '#topbutton', events: 'clickoutside' },
    });

Y.Popover

Y.Popover extends Y.Tipsy and mixes in the Y.WidgetStdMod extension to introduce the notion of a header, body and footer. You can use it exactly how you would use Y.Tipsy, but now you have access to three new attributes: headerContent, bodyContent, and footerContent.

Usage

You can get Y.Tipsy from the YUI Gallery (it's not there yet).


    YUI({
    }).use('gallery-popover', function (Y) { 
        //Y.Popover is loaded and good to go.
    });
Popover Demo

You can set these through HTML data-attributes too:


    Popover Demo
            

    var popover = new Y.Popover({
        selector: ".popover",
        width: 300
    });

    popover.render();

See it in action

Hover over the links below to see Y.Tipsy in action.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur aliquet mollis turpis non tempus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Class aptent taciti sociosqu ad hover to show tooltip per conubia nostra, per inceptos himenaeos. Nunc posuere eros non orci auctor non faucibus nunc feugiat. Etiam tellus erat, bibendum non rutrum nec, commodo at tellus. Etiam feugiat risus vitae leo tincidunt ac venenatis purus vulputate. Donec at nisl ut nunc euismod varius. hover id lorem erat. Ut eget nunc nulla. Curabitur mollis, purus eu sodales luctus, metus sem sagittis justo, fringilla malesuada augue nunc sed quam. Curabitur ac magna eu sapien convallis tristique.