https://www.swissotel.fr/frhi/inc/js/jquery-accessible-simple-tooltip-aria.js

1(function () {
2
3    'use strict';
4
5    /*
6     * jQuery accessible simple (non-modal) tooltip window, using ARIA
7     * @version v2.3.0 
8     * Website: https://a11y.nicolas-hoffmann.net/simple-tooltip/
9     * License MIT: https://github.com/nico3333fr/jquery-accessible-simple-tooltip-aria/blob/master/LICENSE
10     */
11
12    function accessibleSimpleTooltipAria(options) {
13        var element = $(this);
14        options = options || element.data();
15        var text = options.simpletooltipText || '';
16        var prefix_class = typeof options.simpletooltipPrefixClass !== 'undefined' ? options.simpletooltipPrefixClass + '-' : '';
17        var content_id = typeof options.simpletooltipContentId !== 'undefined' ? '#' + options.simpletooltipContentId : '';
18        var simpletooltip_wrapper_tag = typeof options.simpletooltipWrapperTag !== 'undefined' ? options.simpletooltipWrapperTag : 'div';
19        var simpletooltip_tag = typeof options.simpletooltipTag !== 'undefined' ? options.simpletooltipTag : 'div';
20
21        var index_lisible = Math.random().toString(32).slice(2, 12);
22        var aria_describedby = element.attr('aria-describedby') || '';
23
24        element.attr({
25            'aria-describedby': 'accessible_tooltip_' + index_lisible + ' ' + aria_describedby
26        });
27
28        element.wrap('<' + simpletooltip_wrapper_tag + ' class="' + prefix_class + 'simpletooltip_container"></' + simpletooltip_wrapper_tag + '>');
29
30        var html = '<' + simpletooltip_tag + ' class="js-simpletooltip ' + prefix_class + 'simpletooltip" id="accessible_tooltip_' + index_lisible + '" role="tooltip" aria-hidden="true">';
31
32        if (text !== '') {
33            html += '' + text + '';
34        } else {
35            var $contentId = $(content_id);
36            if (content_id !== '' && $contentId.length) {
37                html += $contentId.html();
38            }
39        }
40        html += '</' + simpletooltip_tag + '>';
41
42        $(html).insertAfter(element);
43    }
44
45    // Bind as a jQuery plugin
46    $.fn.accessibleSimpleTooltipAria = accessibleSimpleTooltipAria;
47
48    $(document).ready(function () {
49
50        $('.js-simple-tooltip')
51            .each(function () {
52                // Call the function with this as the current tooltip
53                accessibleSimpleTooltipAria.apply(this);
54            });
55
56        // events ------------------
57        $('body')
58            .on('mouseenter focusin', '.js-simple-tooltip', function () {
59                var $this = $(this);
60                var aria_describedby = $this.attr('aria-describedby');
61                var tooltip_to_show_id = aria_describedby.substr(0, aria_describedby.indexOf(" "));
62                var $tooltip_to_show = $('#' + tooltip_to_show_id);
63                $tooltip_to_show.attr('aria-hidden', 'false');
64            })
65            .on('mouseleave', '.js-simple-tooltip', function (event) {
66                var $this = $(this);
67                var aria_describedby = $this.attr('aria-describedby');
68                var tooltip_to_show_id = aria_describedby.substr(0, aria_describedby.indexOf(" "));
69                var $tooltip_to_show = $('#' + tooltip_to_show_id);
70                var $is_target_hovered = $tooltip_to_show.is(':hover');
71
72                //alert($target_hovered);
73                //$target.addClass('redborder');
74                if (!$is_target_hovered) {
75                    $tooltip_to_show.attr('aria-hidden', 'true');
76                }
77            })
78            .on('focusout', '.js-simple-tooltip', function (event) {
79                var $this = $(this);
80                var aria_describedby = $this.attr('aria-describedby');
81                var tooltip_to_show_id = aria_describedby.substr(0, aria_describedby.indexOf(" "));
82                var $tooltip_to_show = $('#' + tooltip_to_show_id);
83
84                $tooltip_to_show.attr('aria-hidden', 'true');
85            })
86            .on('mouseleave', '.js-simpletooltip', function () {
87                var $this = $(this);
88                $this.attr('aria-hidden', 'true');
89            })
90            .on('keydown', '.js-simple-tooltip', function (event) {
91                // close esc key
92
93                var $this = $(this);
94                var aria_describedby = $this.attr('aria-describedby');
95                var tooltip_to_show_id = aria_describedby.substr(0, aria_describedby.indexOf(" "));
96                var $tooltip_to_show = $('#' + tooltip_to_show_id);
97
98                if (event.keyCode == 27) { // esc
99                    $tooltip_to_show.attr('aria-hidden', 'true');
100                }
101            });
102    });
103
104})();