Tooltip Dialog

  • For both instances of the tooltip dialogs, (" Help" and "") they are activated when the link is clicked...
  • Once the link is clicked, the tooltip appears and focus is brought to it's close button, in which the user must either click the close button OR press escape in order to dismiss the tooltip
  • Mouse users may also dismiss the tooltip dialogs by clicking anywhere outside of the dialog
Help
20% of the world's population, that is over 1 billion people, are internet users.

Aliquam quis eleifend libero. Curabitur sagittis vestibulum pretium. Duis eget aliquam purus, quis eleifend ligula. Nunc at dolor scelerisque, pulvinar mi ut, tincidunt ante. Phasellus tortor risus, egestas et nisi vitae, gravida suscipit eros. Praesent interdum vestibulum dolor, at mollis dui mattis dapibus. Quisque bibendum nunc libero, eget imperdiet nulla dapibus eget. Cras ac orci eu ex vehicula venenatis. Morbi faucibus neque et leo sodales, vel lobortis lorem convallis. Duis maximus nulla ac aliquet lacinia. Nullam sit amet placerat nisi, quis dapibus felis. Nam enim turpis, ornare accumsan interdum sagittis, molestie a nisl. Ut in iaculis erat, iaculis vehicula tellus.

Help
Your account number is listed in your confirmation email when you set up your account

HTML Source Code

<a href="#" class="help-link" id="help-link"><i role="presentation" class="fa fa-question-circle"></i> Help</a>
<div id="help-tool-dialog" role="alertdialog" tabindex="-1" aria-describedby="dialog-body" aria-label="Help">
  <button type="button" id="dialog-close">
    <i class="fa fa-times"></i>
    <span class="offscreen">Close</span>
  </button>
  <div id="dialog-body">20% of the world's population, that is over 1 billion people, are internet users.</div>
</div>
<p>Aliquam quis eleifend libero. Curabitur sagittis vestibulum pretium. Duis eget aliquam purus, quis eleifend ligula. Nunc at dolor scelerisque, pulvinar mi ut, tincidunt ante. Phasellus tortor risus, egestas et nisi vitae, gravida suscipit eros. Praesent interdum vestibulum dolor, at mollis dui mattis dapibus. Quisque bibendum nunc libero, eget imperdiet nulla dapibus eget. Cras ac orci eu ex vehicula venenatis. Morbi faucibus neque et leo sodales, vel lobortis lorem convallis. Duis maximus nulla ac aliquet lacinia. Nullam sit amet placerat nisi, quis dapibus felis. Nam enim turpis, ornare accumsan interdum sagittis, molestie a nisl. Ut in iaculis erat, iaculis vehicula tellus.</p>
<div id="pseudo-form">
  <label for="account" id="account-number-label">Account Number</label>
  <a href="#" id="account-help-trigger" aria-label="Help" aria-describedby="account-number-label">
    <i class="fa fa-question-circle"></i>
    <span class="offscreen">Help</span>
  </a>
  <input type="text" id="account-number">

  <div id="account-help-dialog" role="alertdialog" tabindex="-1" aria-describedby="account-help-body" aria-label="Account Number Help">
    <button type="button" id="help-dialog-close">
      <i class="fa fa-times"></i>
      <span class="offscreen">Close</span>
    </button>
    <span id="account-help-body">Your account number is listed in your confirmation email when you set up your account</span>
  </div>
  <div>
    <button type="button">Submit</button>
  </div>
</div>

JavaScript Source Code

Dependencies:

  • JQuery
// helpLink is clicked:
// - focus the tooltip
// - when tab or shift tab is presed, trap focus on the close button
// - allow escape to dismiss the tip and return focus to the trigger
// - if anywhere outside of the dialog is clicked, close the dialog and return focus to the trigger

var $helpLink = $('#help-link');
var $tool = $('#help-tool-dialog');
var $toolClose = $('#dialog-close');
// clicks on the help link -> focus the tooltip
$helpLink.on('click', function (e) {
  e.stopPropagation();
  $tool.show();
  $toolClose[0].focus();
});

// keydowns on the tooltip
$tool.on('keydown', function (e) {
  if (e.which === 9) { // TAB
    e.preventDefault();
    $toolClose.focus();
  } else if (e.which === 27) { // ESCAPE
    $toolClose.click();
  }
});

$toolClose.on('keydown', function (e) {
  if (e.which === 9) { // TAB or SHIFT+TAB
    e.preventDefault(); // trap focus within tooltip
  }
});

// clicks on the close button -> hide tooltip and focus it's trigger
$toolClose.on('click', function () {
  $tool.fadeOut();
  $helpLink.focus();
});

// "Account Number" helper
var $accTrigger = $('#account-help-trigger');
var $accDialog = $('#account-help-dialog');
var $accDialogClose = $('#help-dialog-close');

$accTrigger.on('click', function (e) {
  e.stopPropagation(); // prevents the document's click listener from receiving this click
  e.preventDefault(); // dont scroll
  $accDialog.show();
  $accDialogClose[0].focus();
});

$accDialogClose.on('click', function () {
  $accDialog.hide();
  $accTrigger.focus();
});

$accDialogClose.on('keydown', function (e) {
  if (e.which === 9) { // TAB or SHIFT+TAB
    e.preventDefault(); // trap focus within tooltip
  } else if (e.which === 27) {
    $accDialogClose[0].click();
  }
});



// clicking outside of the body should close the tooltip and focus the help link
$(document).on('click', function (e) {
  if ($tool.is(':visible') && !$(e.target).closest('#help-tool-dialog')[0]) {
    $tool.fadeOut();
    $helpLink.focus();
  } else if ($accDialog.is(':visible') && !$(e.target).closest('#account-help-dialog')[0]) {
    $accDialogClose.click();
  }
});

CSS Source Code

:focus {
  outline: 2px solid;
}
.help-link {
  padding: 10px;
  font-size: 18px;
  border: 1px solid #000;
  text-decoration:none;
}

#help-tool-dialog, #account-help-dialog {
  display: none;
  padding: 10px;
  position: absolute;
  background-color: #fff;
  border: 2px solid #ccc;
  border-radius: 15px;

}

.offscreen {
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

#account-help-trigger {
  text-decoration: none;
}

Copy and Paste Full Page Example