Skip to content
Browse files

Add basic ARIA support

  • Loading branch information...
1 parent 8cd3dbc commit 0879cae04bce36e430d3d6c1c8797e2977328462 Ben Buchanan committed Sep 20, 2012
Showing with 11 additions and 1 deletion.
  1. +11 −1 src/javascripts/jquery.tipsy.js
View
12 src/javascripts/jquery.tipsy.js
@@ -15,6 +15,12 @@
}
return false;
};
+
+ var tipsyIDcounter = 0;
+ function tipsyID() {
+ var tipsyID = tipsyIDcounter++;
+ return "tipsyuid" + tipsyID;
+ };
function Tipsy(element, options) {
this.$element = $(element);
@@ -77,6 +83,10 @@
} else {
$tip.css({visibility: 'visible', opacity: this.options.opacity});
}
+
+ var $tipID = tipsyID();
+ $tip.attr("id", $tipID);
+ this.$element.attr("aria-describedby", $tipID);
}
},
@@ -110,7 +120,7 @@
tip: function() {
if (!this.$tip) {
- this.$tip = $('<div class="tipsy"></div>').html('<div class="tipsy-arrow"></div><div class="tipsy-inner"></div>');
+ this.$tip = $('<div class="tipsy"></div>').html('<div class="tipsy-arrow"></div><div class="tipsy-inner"></div>').attr("role","tooltip");
this.$tip.data('tipsy-pointee', this.$element[0]);
}
return this.$tip;

1 comment on commit 0879cae

@cheshrkat
Owner

Test page (place in parent of tipsy clone):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=EDGE">
    <title>Page Title</title>
    <style>
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
    <script src="tipsy/src/javascripts/jquery.tipsy.js"></script>

    <link rel="stylesheet" type="text/css" href="tipsy/src/stylesheets/tipsy.css">
    <style type="text/css">
    body { padding: 2em; text-align: center; font-size: 14px; }
    #simple-tooltip:after {
        content: " (aria-describedby:"attr(aria-describedby)")";
        color: black;
    }
    .tipsy:after {
        content: "(role:"attr(role)") id: "attr(id);
        font-size: 14px;
    }
    </style>

</head>
<body>


<p><a id="simple-tooltip" href="#" title="trigger describedby should match this id">tooltip</a></p>


<script>
$(document).ready( function() {
    $("#simple-tooltip").tipsy();
});
</script>

</body>
</html>
Please sign in to comment.
Something went wrong with that request. Please try again.