Skip to content

Commit

Permalink
support both aria-label & data-hint attribute. fixes #81
Browse files Browse the repository at this point in the history
chinchang committed Apr 18, 2016

Verified

This commit was signed with the committer’s verified signature.
dtolnay David Tolnay
1 parent e004a4c commit cc35fa1
Showing 2 changed files with 14 additions and 4 deletions.
16 changes: 13 additions & 3 deletions src/hint-core.scss
Original file line number Diff line number Diff line change
@@ -10,7 +10,7 @@
* 1) hint
*/

[class*="hint--"] {
[class*="#{$hintPrefix}"] {
position: relative;
display: inline-block;

@@ -60,7 +60,6 @@
* tooltip body
*/
&:after {
content: attr(aria-label); // The magic!
background: $hintDefaultColor;
color: white;
padding: $hintVerticalPadding $hintHorizontalPadding;
@@ -69,9 +68,20 @@
line-height: $hintFontSize; // Vertical centering.
white-space: nowrap; // Prevent breaking to new line.
}
// Always get content from aria-label attribute.
&[aria-label]:after {
content: attr(aria-label); // The magic!
}
// If the `data-hint` attribute is present, use it.
// This might be deprecated in future in support of a11y.
&[data-hint]:after {
content: attr(data-hint); // The magic!
}
}

[aria-label=''] {
// Hide tooltips if any of the supported attributes is empty.
[aria-label=''],
[data-hint=''] {
&:before, &:after {
display: none !important;
}
2 changes: 1 addition & 1 deletion src/hint-theme.scss
Original file line number Diff line number Diff line change
@@ -5,7 +5,7 @@
*
*/

[data-hint] {
[class*="#{$hintPrefix}"] {
/**
* tooltip body
*/

0 comments on commit cc35fa1

Please sign in to comment.