Media WebUI

Tooltip Classes

The following tables describe the classes available in WebUI for tooltips.

Sizing Classes

Class
Initial Width
tooltip-sm
7.813rem
tooltip-md
10.938rem
tooltip-lg
14.063rem

Positioning Classes

Class
Description
tooltip-top
Positions the tooltip at the top of its target control.
tooltip-left
Positions the tooltip at the left of its target control.
tooltip-bottom
Positions the tooltip at the bottom of its target control.
tooltip-right
Positions the tooltip at the right of its target control.

Tooltip Type Classes

Class
Description
tooltip-dynamic
Causes the tooltip to show while hovering over its target control.
tooltip-focus
Causes the tooltip to show on focus of its target control.
tooltip-static
Use this option if you just want to show or hide tooltips manually with javascript.

Additional Classes

Class
Description
tooltip-close
When added to an element inside the tooltip container, selecting the element will close the tooltip.

Tooltips are a popular way of displaying hints to the user, and can help guide and make the user's experience more intuitive. Although an initial size is set on the tooltip they do automatically downsize for smaller screen areas, so a tooltip that is initially large may switch to medium or small when displayed in a confined space. Similarly, a tooltip may reposition itself if within a confined space.

Basic Tooltips

The following example shows how to use tooltips without adding JavaScript. By default, auto repositioning and auto resizing are set to true.

Example
Basic left tooltip
Basic top tooltip
Basic bottom tooltip
Basic right tooltip
Markup
<div class="table-row text-sm col-padding-md">
  <div class="table-col">
    <div class="tooltip">
      <div class="tooltip-dynamic tooltip-left tooltip-sm tooltip-dark">
        Basic left tooltip
      </div>
      <input type="text" class="input-sm width-md-lg">
    </div>
  </div>
  <div class="table-col">
    <div class="tooltip">
      <div class="tooltip-dynamic tooltip-top tooltip-sm tooltip-dark">
        Basic top tooltip
      </div>
      <input type="text" class="input-sm width-md-lg">
    </div>
  </div>
  <div class="table-col">
    <div class="tooltip">
      <div class="tooltip-dynamic tooltip-bottom tooltip-sm tooltip-dark">
        Basic bottom tooltip
      </div>
      <input type="text" class="input-sm width-md-lg">
    </div>
  </div>
  <div class="table-col">
    <div class="tooltip">
      <div class="tooltip-dynamic tooltip-right tooltip-sm tooltip-dark">
        Basic right tooltip
      </div>
      <input type="text" class="input-sm width-md-lg">
    </div>
  </div>		
</div>

Tooltips can be implemented without the need to write any JavaScript. However, using the Javascript initialisation allows you to setup how all tooltips will behave for the whole page by default. Some of these initialisation settings can be overriden for individual tooltips by use of classes.

Example
The autoResizing setting has been overridden by adding the tooltip-noautosize class.
Markup
<div class="table-row text-sm">
  <div class="table-col">
    <div class="tooltip">
      <div class="tooltip-dynamic tooltip-right tooltip-lg tooltip-dark tooltip-noautosize">
        The autoResizing setting has been overridden by adding the tooltip-noautosize class.
      </div>
      <input type="text" class="input-sm width-md-lg">
    </div>
  </div>
</div>
Script
webui.ready(function() {

  ui.initTooltips({
    autoPositioning: true,
    autoResizing: true,
    autoPositioningMargin: 0,
    transitionDuration: 1000
  });

});

There may be cases when you need to show or hide tooltips via javascript. You can do that simply by specifying an id on the tooltip wrapper, calling one of the webui.js functions, and optionally specifying a message. Below is some javascript to configure options and explicitly show a tooltip.

Static and focus type tooltips can be closed by using the Esc key if focus is on the tooltip target element.

Example
Markup
<div class="table-row text-sm">
  <div class="table-col">
      <button id="tooltipStaticShow" class="button-sm button-accent-1">Show Tooltip</button>
  </div>
  <div class="table-col">
      <button id="tooltipStaticHide" class="button-sm button-accent-1">Hide Tooltip</button>
  </div>
  <div class="table-col">
    <div class="tooltip" id="tooltipStatic">
      <div class="tooltip-static tooltip-bottom tooltip-sm tooltip-dark text-sm"></div>
      <input type="text" class="input-sm width-md-lg">
    </div>
  </div>
</div>
Script
webui.ready(function() {

  ui.initTooltips({
    autoPositioning: true,
    autoResizing: true,
    autoPositioningMargin: 0,
    transitionDuration: 2000
  });

  ui("#tooltipStaticShow").click(function() {
    ui("#tooltipStatic").showTooltip("Static tooltip with message.");
  });

  ui("#tooltipStaticHide").click(function() {
    ui("#tooltipStatic").hideTooltip();
  });

});

Detailed Useage

Tooltip resizing and positioning

Tooltips use viewport boundary collision detection to attempt to avoid the possibility of being placed off screen or partially off screen. On larger screens and when the browser window is resized or scrolled the re-positioning functionality is dominant, but as the screen area gets smaller the tooltip re-sizing becomes more dominant with re-positioning more restrictive. What that means is that on a phone for example, the tooltip would likely stay at the smallest width and normally be located at the top or bottom of the target element. If, on the other hand the web page was viewed on a desktop screen, tooltips would be much more likely to stay at their original size.

Overriding global settings

Some tooltip global settings can be overriden using opt-out CSS classes on individual tooltips. Use the following.

Class
Description
tooltip-nopadding
Removes the default padding from the tooltip content area.
tooltip-noautopos
Stops the tooltip from automatically positioning regardless of settings.
tooltip-noautosize
Stops the tooltip from automatically resizing regardless of settings.
tooltip-noautohide
Stops the tooltip from closing automatically on exiting events.

Customisation

As with all components in WebUI, tooltips may be customised in a number of ways. However, they are a bit limited when larger amounts of content are required due to pre-defined widths and padding. This is not going to be a problem as WebUI is flexible enough to allow significant customisation.

Example
Heading
Lorem ipsum dolor sit amet, mei decore nonumy tamquam ad, cu alienum adipiscing per. Cum tamquam albucius ex, his ad prima nostrum menandri. An usu facilisis neglegentur, ius amet perfecto definiebas an. Eu legere sanctus interesset qui, ridens impedit persecuti sit eu, vidit diceret nam eu.
Markup
<div class="table-row text-sm">
  <div class="table-col">
    <div class="tooltip width-full" id="tooltipEnterValues">
      <div class="tooltip-focus tooltip-top tooltip-lg tooltip-accent-4 tooltip-nopadding tooltip-noautosize rounded-md">
        <div class="primary border-sm border-accent-4 rounded-md">
          <div class="panel accent-4 text-bold rounded-top-md place-top-center width-full">
            Heading
          </div>
          <div class="row-spacing-md"></div>
          <div class="area text-sm rounded-bottom-md">
            Lorem ipsum dolor sit amet, mei decore nonumy tamquam ad, cu alienum adipiscing per. Cum tamquam albucius ex, his ad prima
            nostrum menandri. An usu facilisis neglegentur, ius amet perfecto definiebas an. Eu legere sanctus interesset
            qui, ridens impedit persecuti sit eu, vidit diceret nam eu.
          </div>
        </div>
      </div>
      <input id="textURL" type="text" class="input-sm rounded-sm width-full accessibility" />
    </div>
  </div>
</div>
Script
webui.ready(function() {
  
    ui.initTooltips({
      autoPositioning: true,
      autoResizing: true,
      autoPositioningMargin: 0,
      transitionDuration: 2000
    });
  
  });
Tooltip Pointer

In order to set the tooltip pointer colour, you need to include the tooltip theme colour - in the above example tooltip-accent-4 is used.