Tooltip Example

The following example shows how to use tooltips.

NOTE: Component instance properties are optional and can be omitted if the default settings are acceptable.

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

webui.ready( () => {

  var tooltipContext1 = webui("body").tooltipControl({
    autoPositioning: true,
    autoResizing: true,
    autoPositioningMargin: 0,
    transitionDuration: 300
  });

});

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 is viewed on a desktop screen, tooltips would be much more likely to stay at their original size.

Tooltip Type Classes

One of the following tooltip type classes must be specified.

Sizing Classes

One of the following tooltip sizing classes must be specified.

Positioning Classes

One of the following tooltip positioning classes must be specified.

Additional Classes

The tooltip-close class is optional, is similar to menu-close and would normally be applied to a button or a link inside the tooltip.

Functions

WebUI provides a set of standard JavaScript tooltip functions. The behaviour of tooltips is controlled by the JavaScript initialisation as shown in the examples below.

Function Arguments

The purpose of each tooltip function argument.

Settings

Javascript settings available for the tooltips control.

Overriding Instance Settings

Some tooltip settings can be overridden using opt-out CSS classes on individual tooltips. See below.

<div class="row text-sm">
  <div class="col">
    <div class="tooltip">
      <div class="tooltip-hover 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>

webui.ready( () => {

  var tooltipContext1 = webui("body").tooltipControl({
    autoPositioning: true,
    autoResizing: true,
    autoPositioningMargin: 0,
    transitionDuration: 300
  });

});

Override Settings Classes

Classes used to override configuration settings are listed below.

Showing and Hiding Tooltips Programatically

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 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.

<div class="row gap-md text-sm">
  <div class="col-fixed">
    <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 class="col-fixed">
      <button id="tooltipStaticShow" class="button-sm button-info">Show Tooltip</button>
  </div>
  <div class="col-fixed">
      <button id="tooltipStaticHide" class="button-sm button-info">Hide Tooltip</button>
  </div>
</div>

webui.ready( () => {

  var tooltipContext1 = webui("body").tooltipControl({
    autoPositioning: true,
    autoResizing: true,
    autoPositioningMargin: 0,
    transitionDuration: 300
  });

  ui("#tooltipStaticShow").click( () => {
    tooltipContext1.showTooltip(ui("#tooltipStatic"), "Static tooltip with message.");
  });

  ui("#tooltipStaticHide").click( () => {
    tooltipContext1.hideTooltip(ui("#tooltipStatic"));
  });

});

Tooltip 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.

<div class="row text-sm">
  <div class="col">
    <div class="tooltip width-full" id="tooltipEnterValues">
      <div class="tooltip-focus tooltip-top tooltip-lg tooltip-accent-2 tooltip-nopadding tooltip-noautosize rounded-md">
        <div class="flex width-full height-xl">
          <div class="flex-col flex-grow border-sm light rounded-sm">
            <header class="accent-2-light pad-sm">Header</header>		
            <p class="flex-auto pad-sm">
              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.  
            </p>		
          </div>
        </div>
      </div>
      <input id="textURL" type="text" class="input-sm rounded-sm width-full accessibility" />
    </div>
  </div>
</div>

webui.ready( () => {

  var tooltipContext1 = webui("body").tooltipControl({
    autoPositioning: true,
    autoResizing: true,
    autoPositioningMargin: 0,
    transitionDuration: 300
  });
  
});

Tooltip Pointer

In order to set the tooltip pointer colour a tooltip theme colour must be specified - in the above example tooltip-accent-2 is used.

If the pointer arrow is not required use tooltip-transparent instead.

Run-time Tooltip Updates

Settings specified for the tooltipControl instance can be updated programatically at run-time. See the following example, which sets the autoPositioning and autoResizing settings to false. Use the restore button to revert the change.

NOTE: All tooltips on this page will be affected by the change as they are all within the same scope and component instance.

<div class="row gap-md text-sm">
  <div class="col-fixed">
    <div class="tooltip" id="tooltipUpdate">
      <div class="tooltip-focus tooltip-lg tooltip-top tooltip-dark text-sm"></div>
      <input type="text" class="input-sm width-md-lg">
    </div>
  </div>
  <div class="col-fixed">
    <button id="tooltipUpdateCommand" class="button-sm menu-button-info">Update Settings</button>
  </div>
  <div class="col-fixed">
    <button id="tooltipRestoreCommand" class="button-sm menu-button-info">Restore settings</button>
  </div>
</div>

webui.ready( () => {

  var tooltipContext1 = webui("body").tooltipControl({
    autoPositioning: true,
    autoResizing: true,
    autoPositioningMargin: 0,
    transitionDuration: 300
  });

  ui("#tooltipUpdateCommand").click( () => {
    tooltipContext1.update({ autoPositioning: false, autoResizing: false });
  });

  ui("#tooltipRestoreCommand").click( () => {
    tooltipContext1.update({ autoPositioning: true, autoResizing: true });
  });

});

Functions

WebUI provides a single function that can be used to update the tooltip instance settings at runtime.

Function Arguments

Tooltip Event Callbacks

There are 4 event callbacks that can be used, ui.tooltip.show.before, ui.tooltip.show.after, ui.tooltip.hide.before, and ui.tooltip.hide.after. The following script shows how to setup the event callbacks.

webui.ready( () => {
  
  tooltipContext1.on("ui.tooltip.show.before", (e) => {
    // Take some action
  });

  tooltipContext1.on("ui.tooltip.show.after", (e) => {
    // Take some action
  });

  tooltipContext1.on("ui.tooltip.hide.before", (e) => {
    // Take some action
  });

  tooltipContext1.on("ui.tooltip.hide.after", (e) => {
    // Take some action
  });
          
});