Nevertheless Published Mine

    jquery-accessible-simple-tooltip-aria

    2.3.0 • Public • Published

    jQuery accessible simple tooltip window, using ARIA

    This jQuery plugin will provide you an accessible and simple non-modal tooltip, using ARIA.

    Installation

    You can download and install the plugin via:

    • npm: $ npm i jquery-accessible-simple-tooltip-aria
    • bower: $ bower install jquery-accessible-simple-tooltip-aria

    Demo

    The demo is here: https://a11y.nicolas-hoffmann.net/simple-tooltip/

    Why it is accessible

    • It relies on ARIA Design pattern for Tooltips;
    • Thanks to aria-describedby and ids generated on the fly, you never loose any information;
    • You can close it using Esc.

    How it works

    Default

    Basically, the scripts wraps each class="js-simple-tooltip" into a span class="<your-prefix-class>-container" and adds the content into a hidden content next to it. Once you focus or hover the element with class="js-simple-tooltip", it is displayed.

    You can use it on the tag you want (input, button, a…)

    jQuery Plugin

    $('div').accessibleSimpleTooltipAria({
      simpletooltipText: title
    });

    License

    No license problem, it uses MIT license, so it’s free, open-source and you can do whatever you want with it, including commercial use (permission notice)

    Options and attributes

    Use data-simpletooltip-text or data-simpletooltip-content-id attributes on an element to activate the tooltip.

    • Simply put class="js-simpletooltip" on a button to activate the script.
    • Attribute data-simpletooltip-prefix-class (non mandatory): the prefix to all style classes of the tooltip (useful to set up different styles).
    • Attribute data-simpletooltip-text: the text of your tooltip.
    • Attribute data-simpletooltip-content-id: the id of (hidden) content in your page that will be put into your tooltip.
    • Attribute data-simpletooltip-wrapper-tag: the tag used for wrapping your tooltip (span by default).
    • Attribute data-simpletooltip-tag: the tag used for your tooltip (span by default).

    How to style it

    /* it will work better with this box-sizing, you may adapt it to your needs */
    /*html { box-sizing: border-box; }
    *, *:before, *:after {
      box-sizing: inherit;
    }*/
     
    /* Tooltip hidden by default */
    .simpletooltip[aria-hidden="true"],
    .minimalist-simpletooltip[aria-hidden="true"],
    .minimalist-left-simpletooltip[aria-hidden="true"] {
      display: none;
    }
    /* position relative for containers */
    .simpletooltip_container,
    .minimalist-simpletooltip_container,
    .minimalist-left-simpletooltip_container {
      position: relative;
      display: inline;
    }
     
    /* tooltip styles */
    .simpletooltip,
    .minimalist-simpletooltip,
    .minimalist-left-simpletooltip {
      position: absolute;
      display: inline-block;
      z-index: 666;
      width: 10em;
      border-radius: .5em;
      background: rgba( 0, 0, 0, .9 );
      color: #eee;
      padding: .5em;
      text-align: left;
      line-height: 1.3;
    }
    .simpletooltip,
    .minimalist-simpletooltip {
      right: auto;
      left: 100%;
      margin-left: .5em;
    }
    .minimalist-left-simpletooltip {
      right: 100%;
      left: auto;
      margin-right: .5em;
    }
    /* used pseudo-element to make arrows */
    .simpletooltip::before,
    .minimalist-simpletooltip::before,
    .minimalist-left-simpletooltip::before {
      content: '';
      speak: none;
      position: absolute;
      z-index: 666;
      width: 10px;
      height: 10px;
    }
    .simpletooltip::before,
    .minimalist-simpletooltip::before {
      top: .5em;
      left: -10px;
      margin-left: -10px;
      border: 10px solid transparent;
      border-right: 10px solid rgba( 0, 0, 0, .9 );
    }
    .minimalist-left-simpletooltip::before {
      top: .5em;
      right: -10px;
      margin-right: -10px;
      border: 10px solid transparent;
      border-left: 10px solid rgba( 0, 0, 0, .9 )
    }
     
    /* it can be easily adapted in media-queries for tablets/mobile */
     
    /* for this example: mobile */
    @media (max-width: 44.375em) {
     
      .simpletooltip,
      .minimalist-simpletooltip,
      .minimalist-left-simpletooltip  {
        top: 100%;
        left: 50%;
        right: 0;
        margin: 0;
        margin-top: .7em;
        margin-left: -5em;
      }
      .simpletooltip::before,
      .minimalist-simpletooltip::before,
      .minimalist-left-simpletooltip::before  {
        top: -10px;
        right: auto;
        left: 50%;
        margin-left: -5px;
        margin-top: -10px;
        border: 10px solid transparent;
        border-bottom: 10px solid rgba( 0, 0, 0, .9 );
      }
     
    }

    examples

    <button class="js-simple-tooltip"
     data-simpletooltip-text="Cool, it works!">
      Hover or focus me to show the tooltip
    </button>
     
    <button class="js-simple-tooltip"
     data-simpletooltip-content-id="tooltip-case_1">
      Show me another tooltip
    </button>
    <div id="tooltip-case_1" class="hidden">Woot, you can take the content of a hidden block.</div>

    Enjoy.

    Install

    npm i jquery-accessible-simple-tooltip-aria

    DownloadsWeekly Downloads

    38

    Version

    2.3.0

    License

    none

    Unpacked Size

    25.6 kB

    Total Files

    7

    Last publish

    Collaborators

    • nico3333fr