Tooltip Classes
The following tables describe the classes available in WebUI for tooltips.
Sizing Classes
Positioning Classes
Tooltip Type Classes
Additional Classes
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<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<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>
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<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>
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.
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<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>
webui.ready(function() {
ui.initTooltips({
autoPositioning: true,
autoResizing: true,
autoPositioningMargin: 0,
transitionDuration: 2000
});
});
Tooltip PointerIn order to set the tooltip pointer colour, you need to include the tooltip theme colour - in the above example tooltip-accent-4 is used.
