Presentation
How it works ?
The functionality generates a tooltip that is keyboard accessible via the tab key for all elements with a title
stored in parameter.
Demonstrations
Abbreviation
WCAG
Button
Image
Form control
How to use it ?
Insert the code as last element of the body
tag.
<script type="text/javascript" src="AccessTooltip.js"></script>
Create a CSS class to style the tooltip (warning : absolute
position is required) :
Ctooltip{
position:absolute;
background-color:#FFFFF0;
border:1px solid gray;
border-radius:3px;
padding:3px;
box-shadow:2px 2px 2px #000;
color:#000;
font-size:80%;
}
Insert the function as last element of the body
tag and use setting parameters :
<script type="text/javascript">
AccessTooltip({
objs : 'a, button, input, textarea, select',
tooltipClassName : 'Ctooltip',
toolTipBetween : 5,
toolTipUp : false,
mouse : true,
tempDelay : 4000,
useAriaDP : false,
useEscClose : true
});
</script>