LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Accessable tooltips positioning (WIP)

Using only CSS for positioning of Mike's accessable tooltips gist.

  • Due to the order in the markup stack, the natural position of the tooltip can be taken advantage of given position:absolute
  • Minimal css is needed for default positioning
  • Positioning absolute ensures the tooltip elements do not take up space when not visible
  • This method respects the browser window and does not overflow natively (without extra css)
  • It is possible that parent elements with css position defined could throw the positioning of these tooltips off and should be adjusted accordingly (needs further testing to be sure)
  • Tested in Chrome, Firefox, Safari
 
Some check list w/Multiple Help
CSS
body {
  background-color: #fff;
}

h1 {
  padding-top: 20px;
}

.container {
  width: 98%;
  margin: 0 auto;
  margin-bottom: 2em;
  border-bottom: 1px solid #ccc;
  padding-bottom: 2em;
}

.css-stackLabel {
  display: block;
}

fieldset {
  margin: 0;
}

.css-tooltip {
  background-color: #efefef;
  position: absolute;
  display: block;
  padding: 10px;
  max-width: 700px;
}
.css-tooltip.css-tooltip-top {
  bottom: 0;
  top: auto;
}
.css-tooltip.css-tooltip-left {
  left: 0;
  right: auto;
}

.css-tooltip.css-tooltip-top[style="visibility: visible;"]:after {
  top: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(204, 204, 204, 0);
  border-top-color: #cccccc;
  border-width: 8px;
  margin-left: -8px;
}

.css-tooltip[style="visibility: visible;"] {
  background: #ccc;
  margin-top: 10px;
  margin-left: -5px;
  margin-right: 10px;
}
.css-tooltip[style="visibility: visible;"]:after {
  bottom: 100%;
  left: 14px;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(204, 204, 204, 0);
  border-bottom-color: #cccccc;
  border-width: 8px;
  margin-left: -8px;
}

.float-right {
  float: right;
  width: 220px;
}

.clear {
  display: block;
  clear: both;
}

.hx-form-group {
  display: inline-block;
}

textarea {
  margin-top: 5px;
}
JS
// when clicking, if the tool tip is open, close it.
        // Otherwise, open the tooltip if moused over, or focused 
        // but also close the tooltip if moused out, loss of focus, or esc is pressed
                
        $(document).ready(function() {
            // Set globals
            var ariaElement = '';
            var tooltipElement = '';
            // Get the 
            function getElements(thisObj) {
                 // The aria-labeledby attribute will have two values
                // Get those values and drop them into a usable array
                var ariaValues = thisObj.attr('aria-labelledby');
                var ariaValuesArray = ariaValues.split(" ");
                // Get the ID of the tooltip help div. 
                // This should always be the first div with a specific helper class after 
                // the label where the button was interacted with
                // For a form, the button is always in a label
                var idValues = thisObj.closest('label').nextAll('.js-tooltipContent').attr('id');
                // This div might have more than one ID as well so create an array
                var idValuesArray = idValues.split(" ");
                // Find a match between the arrays
                var commonValue = $.grep(ariaValuesArray, function(element) {
                    return $.inArray(element, idValuesArray ) !== -1;
                });
                // The commonValue is the value of the match between buttons 'aria-labelledby' and the tooltip 'ID'
                // Manipulate the tooltip div with the commonValue as the ID
                // The aria attribute may have multiple values, so we need to find if
                // the value exists with a wild card
                ariaElement = "button[aria-labelledby*='" + commonValue + "']";
                tooltipElement = "div#" + commonValue; 
            }
            function clickTooltip(thisObj) {
                
                getElements(thisObj);
                if ($(ariaElement).attr('aria-expanded') == 'true') {
                    // If the tool tip is open, close it
                    $(tooltipElement).css('visibility','hidden');
                    $(ariaElement).attr('aria-expanded','false');
                } else {
                    // Show the tooltip
                    $(tooltipElement).css('visibility','visible');
                    $(ariaElement).attr('aria-expanded','true');
                }
            }
            function openTooltip(thisObj) {
                getElements(thisObj);
                $(tooltipElement).css('visibility','visible');
                $(ariaElement).attr('aria-expanded','true');
            }
            function closeTooltip(thisObj) {
                getElements(thisObj);
                $(tooltipElement).css('visibility','hidden');
                $(ariaElement).attr('aria-expanded','false');
            }
            // For keypress, we need to find out which, if any tooltips are open and close them
            function closeAllTooltips() {
                // Find out which button is focused
                var $focused = $(':focus');
                closeTooltip($focused);
            }
            // Determine whether or not the trigger has been clicked
            $('.js-tooltipAccessor').click(function() {
                $(this).data('clicked', true);
            });
            // Capture the events, take the appropriate action
            if ($('.js-tooltipAccessor').data('clicked')) {
                clickTooltip($(this));
            } else {
                $('.js-tooltipAccessor').mouseover(function() {
                    openTooltip($(this));
                });
                
                $('.js-tooltipAccessor').mouseout(function() {
                    
                    closeTooltip($(this));
                });
                
                $('.js-tooltipAccessor').focus(function() {
                    openTooltip($(this));
                });
                
                $('.js-tooltipAccessor').blur(function() {
                    closeTooltip($(this));
                });
                $(document).keydown(function(e) {
                    if (e.keyCode == 27) {
                        closeAllTooltips();
                    }
                });
            }
        });

Description

Trying some simple base css for the positioning of these tooltips.
Term
Wed, 12/27/2017 - 07:03

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv