52 |

jQuery accessible simple tooltip window, using ARIA

53 | 54 |
55 |

Find/fork me on Github

56 |

Other accessible plugins

57 |
58 |

This jQuery plugin will provide you an accessible and simple non-modal tooltip, using ARIA.

59 | 60 |
61 |
62 | 63 |

First simple example

64 | 65 | 
<button class="js-simple-tooltip"
 66 |  data-simpletooltip-text="Cool, it works!">
 67 |   Hover or focus me to show the tooltip
 68 | </button>
 69 |
70 | 71 |

72 | 73 |
74 |
75 |
76 | 77 |

Second simple example

78 | 79 | 
<button class="js-simple-tooltip"
 80 |  data-simpletooltip-content-id="tooltip-case_1">
 81 |   Show me another tooltip
 82 | </button>
 83 | <div id="tooltip-case_1" class="hidden">Woot, you can take the content of a hidden block.</div>
 84 |
85 | 86 |

87 | 88 | 89 | 90 |
91 |
92 | 93 | 96 | 97 |

Some informations about this script

98 | 99 |
100 |
101 |

102 | 103 |
104 |
105 |

106 | 107 | 110 |
111 |
112 |

113 | 114 |
115 |
116 |

117 | 118 | 121 |
122 |
123 | 124 |

Why it is accessible

125 | 126 | 130 |

You can close it using Esc.

131 | 132 |

How it works

133 | 134 |

Basically, the scripts wraps each class="js-simple-tooltip" into a span class="<your-prefix-class>-container" and adds the content into a hidden content next to it. Once you focus or hover the element with class="js-simple-tooltip", it is displayed.

135 | 136 |

You can use it on the tag you want (input, button, a…)

137 | 138 |

No license problem, it uses MIT license, so it’s free, open-source and you can do whatever you want with it, including commercial use (permission notice)

139 | 140 | 141 |

Last news

142 | 143 | 144 |

17th of July 2018: added data-simpletooltip-wrapper-tag and data-simpletooltip-tag attributes (to specify tags used for tooltip), based on as kindly suggested by @mh-nichts.

145 | 146 |

1st of December 2017: added a fix in case of an already existing attribute aria-describedby, as kindly requested by @jum44.

147 | 148 |

18th of April 2017: linted and reindented code properly.

149 | 150 |

15th of July 2016: thanks to dhoko’s fantastic work, this projet is a real jQuery plugin.

151 | 152 |

27th of June 2016: this plugin is available on bower, and you can install it with bower install jquery-accessible-simple-tooltip-aria.

153 | 154 | 155 |

7th of February 2016: this plugin is available on NPMjs.com, and you can install it with npm i jquery-accessible-simple-tooltip-aria.

156 |

Options and attributes

157 | 158 |

Use data-simpletooltip-text or data-simpletooltip-content-id attributes on an element to activate the tooltip.

159 | 160 | 168 | 169 |

How to style it

170 | 171 |

Here are the styles used for this page:
(I’ve used no prefix class, data-simpletooltip-prefix-class="minimalist" and data-simpletooltip-prefix-class="minimalist-left" to position the tooltip on the left on some examples, you can set up your own 172 | styles)

173 | 174 | 
/* Tooltip hidden by default */
175 | .simpletooltip[aria-hidden="true"],
176 | .minimalist-simpletooltip[aria-hidden="true"],
177 | .minimalist-left-simpletooltip[aria-hidden="true"] {
178 |   display: none;
179 | }
180 | /* position relative for containers */
181 | .simpletooltip_container,
182 | .minimalist-simpletooltip_container,
183 | .minimalist-left-simpletooltip_container {
184 |   position: relative;
185 |   display: inline;
186 | }
187 | 
188 | /* tooltip styles */
189 | .simpletooltip,
190 | .minimalist-simpletooltip,
191 | .minimalist-left-simpletooltip {
192 |   position: absolute;
193 |   display: inline-block;
194 |   z-index: 666;
195 |   width: 10em;
196 |   border-radius: .5em;
197 |   background: rgba( 0, 0, 0, .9 );
198 |   color: #eee;
199 |   padding: .5em;
200 |   text-align: left;
201 |   line-height: 1.3;
202 | }
203 | .simpletooltip,
204 | .minimalist-simpletooltip {
205 |   right: auto;
206 |   left: 100%;
207 |   margin-left: .5em;
208 | }
209 | .minimalist-left-simpletooltip {
210 |   right: 100%;
211 |   left: auto;
212 |   margin-right: .5em;
213 | }
214 | /* used pseudo-element to make arrows */
215 | .simpletooltip::before,
216 | .minimalist-simpletooltip::before,
217 | .minimalist-left-simpletooltip::before {
218 |   content: '';
219 |   speak: none;
220 |   position: absolute;
221 |   z-index: 666;
222 |   width: 10px;
223 |   height: 10px;
224 | }
225 | .simpletooltip::before,
226 | .minimalist-simpletooltip::before {
227 |   top: .5em;
228 |   left: -10px;
229 |   margin-left: -10px;
230 |   border: 10px solid transparent;
231 |   border-right: 10px solid rgba( 0, 0, 0, .9 );
232 | }
233 | .minimalist-left-simpletooltip::before {
234 |   top: .5em;
235 |   right: -10px;
236 |   margin-right: -10px;
237 |   border: 10px solid transparent;
238 |   border-left: 10px solid rgba( 0, 0, 0, .9 )
239 | }
240 | 
241 | /* it can be easily adapted in media-queries for tablets/mobile */
242 | 
243 | /* for this example: mobile */
244 | @media (max-width: 44.375em) {
245 | 
246 |   .simpletooltip,
247 |   .minimalist-simpletooltip,
248 |   .minimalist-left-simpletooltip  {
249 |     top: 100%;
250 |     left: 50%;
251 |     right: 0;
252 |     margin: 0;
253 |     margin-top: .7em;
254 |     margin-left: -5em;
255 |   }
256 |   .simpletooltip::before,
257 |   .minimalist-simpletooltip::before,
258 |   .minimalist-left-simpletooltip::before  {
259 |     top: -10px;
260 |     right: auto;
261 |     left: 50%;
262 |     margin-left: -5px;
263 |     margin-top: -10px;
264 |     border: 10px solid transparent;
265 |     border-bottom: 10px solid rgba( 0, 0, 0, .9 );
266 |   }
267 | 
268 | }
269 | 
270 | 
271 |
272 | 273 |

As usual, it is not prohibited to tell me that you’ve used it, or send me a little “thank you”. ;)

274 | 275 | 276 | 277 | 278 |