Skip to content

Commit

Permalink
Merge pull request #157 from PublicisSapient/Issue128-tooltipupdate
Browse files Browse the repository at this point in the history 
Tooltip update
  • Loading branch information
@zoltan-dulac
zoltan-dulac authored Oct 17, 2024
2 parents 3313377 + a85fa70 commit d170968
Show file tree
Hide file tree
Showing 9 changed files with 658 additions and 203 deletions.
3 changes: 3 additions & 0 deletions content/body/acknowledgements.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -138,6 +138,9 @@
<li><a href="https://zellwk.com/">Zell Liew</a> for
the routine for <a href="https://github.com/zellwk/javascript/blob/master/src/browser/accessibility/focusable/focusable.js">
getting all the focusable elements inside a DOM element</a> that <code>accessibility.getAlTabbableEls()</code> is based on.</li>
<li><a href="https://github.com/lunarias">Jessie Cai</a> for
adding additional functionality and cleaning up <a href="https://github.com/PublicisSapient/enable-a11y/blob/main/js/modules/tooltip.js">tooltip control</a>
</li>
</ul>

<h2>Icons</h2>
Expand Down
116 changes: 104 additions & 12 deletions content/body/tooltip.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
information about an existing UI control. It is hidden by default and becomes available on hover or focus of the
control it describes.</strong> <a href="https://sarahmhigley.com/">Sarah M. Higley</a> came up with this definition for what a
tooltip is in her article <a href="https://sarahmhigley.com/writing/tooltips-in-wcag-21/">Tooltips in the time of WCAG
2.1</a>, and it's better than anything I could write, so I hope she doesn't mind me stealing it.
2.1</a>, and it's better than anything we could write, so we hope she doesn't mind me stealing it.
</p>


Expand All @@ -19,19 +19,52 @@
]); ?>

<p>
This solution can be styled exactly as wanted, appears on focus, and uses the maximum value of a z-index in the document. It will disappear when keyboard users press the Escape key. <strong>It doesn't work in mobile,</strong> which while consistent with other tooltip solutions, is something that I am still looking to fix. If anyone has any ideas, please feel free to <a href="https://twitter.com/zoltandulac">reach out to me on Twitter</a>.
This solution can be styled exactly as wanted and uses the maximum value of a z-index in the document.
We show different types of tooltips below, based on how they are triggered.
It will disappear when keyboard users press the Escape key.
<strong>It doesn't work in mobile,</strong> which while consistent with other tooltip solutions,
is something that we are still looking to fix. If anyone has any ideas, please feel free to <a href="https://twitter.com/zoltandulac">reach out to me on Twitter</a>.
</p>

<h3> Clickable tooltip </h3>
<p> This type of tooltip can be triggered when the user clicks on the entry element directly.</p>

<p>
The form example below demonstrates tooltips that can be triggered via text button and icon button click.
</p>

<div id="example1" class="enable-example">
<p>
<a href="/" data-tooltip="This tooltip is accessible!">This link has a tooltip</a>
<label for="input-tooltip-example2">and so does this input field:</label>
<input id="input-tooltip-example2" type="text" data-tooltip="You can put tooltips on any focusable item.">
</p>
<form class="enable-form-example">
<fieldset>
<legend>Vehicle Inspection Form</legend>
<div class="enable-form-example__fieldset-inner-container">
<div class="field-block">
<label for="clickable_example_1" class="form-label">
<span>VIN</span>
</label>
<input id="clickable_example_1" size="25" type="text">
<button id="tooltip_button_1" type="button" class="tooltip__text-button" aria-label="Clickable tooltip information"
data-tooltip="VIN (Vehicle Identification Number) is a 17 character (digits/capital letters) unique identifier for a vehicle.">
<span>What's this?</span>
</button>
</div>
<div class="field-block">
<label for="clickable_example_2" class="form-label">
<span>Body style</span>
</label>
<input id="clickable_example_2" size="25" type="text">
<button id="tooltip_button_2" type="button" class="tooltip__icon-button" aria-label="Clickable tooltip information"
data-tooltip="Categorization of a car based on its shape, style, and space. Examples include sedan, SUV, convertible, etc.">
<span class="icon" aria-hidden="true">i</span>
</button>
</div>
<input value="Submit" type="submit">
</div>
</fieldset>
</form>
</div>


<?php includeShowcode("example1"); ?>
<?php includeShowcode("example1", "", "", "", true, 4); ?>

<script type="application/json" id="example1-props">
{
Expand All @@ -49,7 +82,66 @@
{
"label": "Create the show and hide methods for the tooltip",
"highlight": "%JS% tooltip.show; tooltip.hide",
"notes": "We make sure the element that triggered the tooltip's <code>show</code> method will be connected to it with he aria-describedby attribute, which points to the tooltip. This ensures screen readers announce the tooltip on focus."
"notes": "We make sure the element that triggered the tooltip's <code>show</code> method will be connected to it with the aria-describedby attribute, which points to the tooltip. This ensures screen readers announce the tooltip on focus."
},
{
"label": "Ensure tooltip disappears when Escape key is pressed",
"highlight": "%JS% tooltip.onKeyup",
"notes": "This is to ensure keyboard users can make the tooltip disappear without tabbing out of the component."
},
{
"label": "Set up the CSS",
"highlight": "%CSS%tooltip-css~ .tooltip; .tooltip::before; .tooltip--hidden ||| border[^:]*: 1px solid transparent; ",
"notes": "The arrow that points to this tooltip is CSS generated content. We hide the content ensuring it is still read by screen readers. <strong>Note the highlighted properties</strong>. <a href=\"https://piccalil.li/quick-tip/use-transparent-borders-and-outlines-to-assist-with-high-contrast-mode\">These ensure the tooltips appear in Windows High Contrast Mode</a>."
}
]
}
</script>

<h3> Focusable tooltip </h3>
<p> This type of tooltip can be triggered when the user either clicks on it or navigates to it by keyboard.</p>
<p>
The form example below demonstrates a tooltip that can be triggered via input field click.
</p>
<div id="example2" class="enable-example">
<form class="enable-form-example">
<fieldset>
<legend>Lease termination form</legend>
<div class="enable-form-example__fieldset-inner-container">
<div class="field-block">
<label for="focusable_example_1" class="form-label">Tenant name</label>
<input id="focusable_example_1" size="25" type="text" data-tooltip="The full name of the tenant residing in the residential unit.">
</div>
<div class="field-block">
<label for="focusable_example_2" class="form-label">Termination date (mm/dd/yyyy)</label>
<input id="focusable_example_2" size="25" type="text" data-tooltip="The date in which the tenant will move out.">
</div>
<input value="Submit" type="submit">
</div>
</fieldset>
</form>
</div>


<?php includeShowcode("example2", "", "", "", true, 4); ?>

<script type="application/json" id="example2-props">
{
"replaceHtmlRules": {},
"steps": [{
"label": "Create markup",
"highlight": "data-tooltip",
"notes": "Our script uses the <code>data-tooltip</code> attribute instead of the <code>title</code> attribute, since <strong>title</strong> is rendered by user agents by default and cannot be styled."
},
{
"label": "Create JavaScript events for tooltip script",
"highlight": "%JS% tooltip.create; tooltip.init",
"notes": "When the page is loaded, create the tooltip DOM object and initialize the mouse and keyboard events that will display the tooltips. <strong>Note the role of tooltip being added to the tooltip DOM object</strong>."
},
{
"label": "Create the show and hide methods for the tooltip",
"highlight": "%JS% tooltip.show; tooltip.hide",
"notes": "We make sure the element that triggered the tooltip's <code>show</code> method will be connected to it with the aria-describedby attribute, which points to the tooltip. This ensures screen readers announce the tooltip on focus."
},
{
"label": "Ensure tooltip disappears when Escape key is pressed",
Expand All @@ -67,12 +159,12 @@



<h2>Native HTML Tooltips</h2>
<h3>Native HTML Tooltips</h3>

<?php includeStats([
"doNot" => true,
"comment" =>
"Although this is a common method to make tooltips, I would advise using the JavaScript method instead.",
"Although this is a common method to make tooltips, we would advise using the JavaScript method instead.",
]); ?>


Expand Down
4 changes: 3 additions & 1 deletion content/head/tooltip.php
View file
Original file line number Diff line number Diff line change
@@ -1 +1,3 @@
<link id="tooltip-css" rel="stylesheet" type="text/css" href="css/tooltip.css" >
<link id="tooltip-css" rel="stylesheet" type="text/css" href="css/tooltip.css" >
<link rel="stylesheet" type="text/css" href="css/group.css" >
<link rel="stylesheet" type="text/css" href="css/form-error.css" >
99 changes: 90 additions & 9 deletions css/tooltip.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
/* Main tooltip */
.tooltip {
display: block;
background: black;
Expand All @@ -7,24 +8,41 @@
position: absolute;
border-radius: 0.5rem;
z-index: 2147483647;
/* Common styling for button entrypoints */
/*
* We put a transparent border here for Windows High Contrast Mode.
* Otherwise, the background will blend into the content underneath.
*/
*/
border: 1px solid transparent;
/* Additional tooltip styles */
/* Button entrypoints */
}
.tooltip .button-common {
color: white;
background-color: blue;
justify-content: center;
align-items: center;
border: none;
cursor: pointer;
position: relative;
}
.tooltip .button-hover {
/* Hover styling */
transition: background-color 0.3s ease;
/* smooth transition */
background-color: darkblue;
/* Example darker background on hover */
}
.tooltip:before {
content: "";
width: 1rem;
height: 1rem;
background: black;
width: 0.01rem;
height: 0.01rem;
position: absolute;
top: -0.5rem;
left: 2rem;
transform: rotate(45deg);
left: 0.1rem;
/* Again, we put a transparent border here for Windows High Contrast Mode */
border-top: 1px solid transparent;
border-left: 1px solid transparent;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid black;
}
.tooltip:after {
content: "";
Expand All @@ -45,3 +63,66 @@
width: 1px;
margin: -1px;
}
.tooltip--top:before {
top: -0.5rem;
}
.tooltip--bottom:before {
bottom: -0.5rem;
transform: rotate(180deg);
}
.tooltip__icon-button {
color: white;
background-color: blue;
justify-content: center;
align-items: center;
border: none;
cursor: pointer;
position: relative;
width: 20px;
height: 20px;
border-radius: 50%;
/* to make it circular */
font-weight: bold;
font-size: 0.75rem;
/* adjust font size as needed */
/* Ensure the button content is centered */
}
.tooltip__icon-button:hover {
/* Hover styling */
transition: background-color 0.3s ease;
/* smooth transition */
background-color: darkblue;
/* Example darker background on hover */
}
.tooltip__icon-button .icon {
display: block;
/* Ensure block display for icon */
text-align: center;
/* Center text horizontally */
line-height: 1;
/* Adjust line height as needed */
}
.tooltip__text-button {
color: white;
background-color: blue;
justify-content: center;
align-items: center;
border: none;
cursor: pointer;
position: relative;
border-radius: 0.2rem;
padding: 0.25rem;
vertical-align: sub;
}
.tooltip__text-button:hover {
/* Hover styling */
transition: background-color 0.3s ease;
/* smooth transition */
background-color: darkblue;
/* Example darker background on hover */
}
@media only screen and (min-width: 720px) {
.tooltip__text-button {
vertical-align: top;
}
}
Loading

0 comments on commit d170968

Please sign in to comment.