Tooltip

Components > User Interaction > Tooltip

Use this component to...

Display additional info for an element in a small popup

See this component in action...

Test out this component in a hosted version of the sample app

Overview

A tooltip is a small pop-up that displays a short text message that is linked to and describes an element in the screen, providing a description of the element or additional information about an action triggered by that element.

Tooltips help users understand additional context that is not directly evident in the view.

Responsive UI support two types of tooltips: native tooltips and field-level tooltips.

Native Tooltips

The browser displays native tooltips display automatically a few seconds after the user hovers the mouse over an element. They disappear a few seconds after displaying, or when the user moves the pointer or keyboard focus.

Native tooltips do not display on mobile devices where there is no mouse to hover over an element. For this reason, they are only niceties that can help explain the UI, and must not be the only way that the user can see any piece of information.

Each browser has its own non-themable styling for native tooltips, so the appearance varies from browser to browser.

A native tooltip displays when the user hovers the mouse over this button

Use native tooltips...

When a button or other object contains only an icon without a text label.
When a button or other object would benefit from additional information that is not available elsewhere in the view.
When the full text of an element has been truncated.

Do not use native tooltips...

If the tooltip would only repeat the label text without providing additional information.
If users may need to print the content of the tooltip.
As the only way for users to access any piece of information.

Field-Level Tooltips

Some form fields need to provide additional information to help users understand what to enter for that particular field. Small hints can be placed inline below the field, but if you need to display more than say a line of hint text for the field, use a field-level tooltip instead.

Unlike native tooltips, field-level tooltips display on both hover and focus, which makes them usable on mobile devices.

Field-level tooltips are themed, so they look the same in every browser. They do not look the same as native tooltips though, because those unfortunately cannot be themed.

This field displays a field-level tooltip icon

Hovering over or clicking the icon displays the field-level tooltip

Development

Web component development

Component reference

rui-info-tooltip

Module: rui-tooltip - Package: @jkhy/responsive-ui-wc

Information icon that displays a themed tooltip popup (rui-tooltip) when the user hovers or presses the icon. Place the tooltip content within the rui-info-tooltip start and closing tags. Typically used within a rui-form-field element.

Name	Type	Default	Description
location	string	'right'	Specifies on which edge of the icon the tooltip will display. One of “top”, “right”, “bottom”, or “left”.
tooltipWidth	number	-1	If you need to override the default tooltip popup width, specify the width in pixels here.

rui-error-tooltip

Module: rui-tooltip - Package: @jkhy/responsive-ui-wc

Error icon that displays a themed tooltip popup (rui-tooltip) when the user hovers or presses the icon. Place the tooltip content within the rui-info-tooltip start and closing tags.

Name	Type	Default	Description
location	string	'right'	Specifies the location of the tooltip popup relative to the tooltip icon. One of ’top’, ‘bottom’, ’left’, or ‘right’ (the default value).
tooltipWidth	number	-1	If you need to override the default tooltip popup width, specify the width in pixels here. The default value results in a width of 200 pixels.

rui-tooltip

Module: rui-tooltip - Package: @jkhy/responsive-ui-wc

Themed tooltip popup that displays when the user hovers or presses the element with the ID specified by elementId. Place the tooltip content within the rui-tooltip start and closing tags.

Name	Type	Default	Description
elementId	string	''	The tooltip displays relative to the element whose ID is specified here.
location	string	'top'	Specifies the location of the tooltip popup relative to its element. One of ’top’ (the default value), ‘bottom’, ’left’, or ‘right’.
tooltipWidth	number	-1	If you need to override the default tooltip popup width, specify the width in pixels here. The default value results in a width of 200 pixels.
displayOnFocus	boolean	true	Specifies whether the tooltip displays when its element receives focus.

Native tooltips

For most HTML elements, use the title property to specify a native tooltip for the element.

Native tooltips use the title property

<rui-button text="Hover the mouse over me" title="This is my tooltip!" buttonStyle="primary"></rui-button>

Themed Tooltips

You can add a rui-tooltip to any element to get a themed tooltip that displays when the element is hovered or receives focus.

In the example below, we define an rui-button and an rui-tooltip that display when the user hovers or presses the button.
The elementId property specifies the ID for the element which the tooltip displays relative to. You can see here that the rui-button has an id of “buttonElement”, which the rui-tooltip uses as its elementId value. This connects the two.
The location property specifies whether the tooltip displays above, below, or to the left or right of its element.
Both the element and the rui-tooltip must be wrapped within an element that has position:relative in order for the tooltip to display properly.

Themed tooltip for a button

<div style="position:relative">
    <rui-button id="buttonElement" text="Button with Tooltip on Right"></rui-button>
    <rui-tooltip elementId="buttonElement" location="right">Tooltip to right of button</rui-tooltip>
</div>

Field-Level Tooltips

Use the rui-info-tooltip component to display a tooltip for a form field. Nest the rui-info-tooltip element within the rui-form-field.

Field-level tooltip

<rui-form-field labelText="Zip" labelFor="field-zip" [isRequired]="true" [hasError]="zip.invalid && (zip.dirty || zip.touched)">

    <input id="field-zip" formControlName="zip" type="number" class="rui-form-control"
        required autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" />

    <rui-info-tooltip>
        This is a field-level tooltip that can provide more information...
    </rui-info-tooltip>

</rui-form-field>

You can display more complex data than just simple text in rui-info-tooltip. The example below embeds a customer photo and tabular data in a field tooltip.

Tooltip with complex data

<rui-info-tooltip tooltipWidth="300">
    <div class="complex-tooltip-container">
        <div class="complex-tooltip-photo">
            <img src="assets/images/womanheadshot.jpg" />
        </div>
        <div class="complex-tooltip-info">
            <table>
                <tr>
                    <td class="complex-tooltip-label">Name:</td>
                    <td class="complex-tooltip-value">Nancy Davolio</td>
                </tr>
                <tr>
                    <td class="complex-tooltip-label">Address:</td>
                    <td class="complex-tooltip-value">123 Main St</td>
                </tr>
                <tr>
                    <td class="complex-tooltip-label">City:</td>
                    <td class="complex-tooltip-value">San Diego</td>
                </tr>
                <tr>
                    <td class="complex-tooltip-label">State:</td>
                    <td class="complex-tooltip-value">CA</td>
                </tr>
            </table>
        </div>
    </div>
</rui-info-tooltip>

Error Tooltips

Use the rui-error-tooltip component to display a tooltip that indicates an error condition. We typically only use this for displaying validation errors while editing in a data grid component, where traditional validation errors won’t work.

Error tooltip

<rui-error-tooltip>
    This cell contains an invalid value
</rui-error-tooltip>

Angular wrapper development

Wrapper reference

jha-field-tooltip-container

Module: JhaFormsModule - Package: @jkhy/responsive-ui-angular

Adds a tooltip icon to the right of a field’s input elements; displays a tooltip on hover or click.

Name	Type	Default	Description
jhaTooltip	string	''	Tooltip to display when the user hovers or clicks the icon

Native Tooltips

For most HTML elements, use the title property to set a native tooltip for the element.

Native tooltips use the title property

<div title="YTD information"></div>

Field-Level Tooltips

Use the jha-field-tooltip-container component to display a tooltip for a form field.

Each field in a form typically wraps its input and validation elements within a div that uses a Bootstrap grid column CSS class to specify its width in the overall field layout. This example adds the “col-md-8” CSS class, which uses 8 of the 12 Bootstrap grid columns at “medium” width.

Field example

<div class="col-md-8">

    <input id="Name" formControlName="name" type="text" class="form-control" required autocomplete="off" autocorrect="off"
     autocapitalize="off" spellcheck="false" />
    <div *ngIf="name.invalid && (name.dirty || name.touched)" class="help-block">
        <div *ngIf="name.errors['required']">
            Name is required
        </div>
    </div>

</div>

Insert the jha-field-tooltip-container component between the input elements and the div that contains the input elements. Set the jhaTooltip property to the string you want to display in the tooltip.

Same example, with a field tooltip container

<div class="col-md-8">

    <jha-field-tooltip-container
     jhaTooltip="This is a field-level tooltip that can provide more information than you would normally display in the help section below the field input.">

        <input id="Name" formControlName="name" type="text" class="form-control" required autocomplete="off" autocorrect="off"
         autocapitalize="off" spellcheck="false" />
        <div *ngIf="name.invalid && (name.dirty || name.touched)" class="help-block">
            <div *ngIf="name.errors['required']">
                Name is required
            </div>
        </div>

    </jha-field-tooltip-container>

</div>

Design

There are no specific design elements for tooltips.

Support options

Have questions on this topic?

Join the Responsive UI team in Microsoft Teams to connect with the community.

See something in this page that needs to change?

Send us feedback on this page.

Last updated Mon May 1 2023