Description: placeholder

508 Guidelines: placeholder

TIP: placeholder

Single-row Gist Tile Toolbar

Multiple-row Gist Tile Toolbar

Pill Gist Tile Toolbar

<!-- add the toolbar at the end of your wrapping container, the container has to have position relative also -->
<div class="ac-items">
    <h4 class="ac-items-heading"><span class="sr-only">Tile Tools</span><button class="ac-items-buttons-toggle" aria-hidden="true">
    </button></h4>
    <div class="ac-items-buttons">
        <button class="ac-item-button info-button" title="Infobutton" type="button">
        <span class="fa fa-info" aria-hidden="true"></span><span class="sr-only"> Press enter to view details</span></button>
        <button class="ac-item-button detail-button" title="Detail" type="button"><span class="fa fa-file-text-o" aria-hidden="true">
        </span><span class="sr-only"> Press enter to view historical information</span></button>
    </div>
</div>
Copy 
$(function() {
    $(document).on('click focus', '.ac-items-buttons-toggle', function() {
        var $clickt = $(this);
        var $cp = $clickt.parent().parent();
        if (!$cp.hasClass('active')) {
            $cp.addClass('active');
            $('body').bind('click.blurActionableItems', function(e) {
                var $tg = $(e.target);
                var isbutton = ($tg.is('button.ac-item-button') || $tg.parent().is('button.ac-item-button') ? true : false);
                if (!isbutton) {
                    $('body').unbind('click.blurActionableItems');
                    $cp.removeClass('active');
                }
            });
        }
    }).on('blur', '.ac-items-buttons-toggle', function() {
        // set timeout added to overcome click/focus swapped event order in firefox.
        setTimeout(function(){
            $(this).parent().parent().removeClass('active');
        },1);
    }).on('focus', '.ac-item-button', function() {
        $(this).parent().parent().addClass('active');
    }).on('blur', '.ac-item-button', function() {
        $(this).parent().parent().removeClass('active');
    });
    $(document).on('click.gistTileInfoButton', '.ac-item-button.info-button', function() {
        alert('Show information action triggered');
    });
    $(document).on('click.gistTileInfoButton', '.ac-item-button.detail-button', function() {
        alert('Show detail action triggered');
    });
});
Copy