Proximus design system
Important information:
Using the Design System implies following some rules: the code should be valid and same as the Design System. Meaning custom HTML & CSS override are forbidden.
Please don't forget to read Usage part of each element.

Tooltips

See deprecated code
expiry date: 30/04/2021

Tooltips display additional information upon click, hover, or focus.

last modified: 24/11/2022 11:50:14

Overview

Tooltips are floating labels that briefly explain the function of a user interface element. Default tooltip can be triggered when user hovers, clicks or navigates to it via keyboard.

Anatomy

  1. Trigger
    The tooltip can be triggered on a icon, a text or an image. Cursor becomes a pointer.

    Tooltip icon

    2 icons are allowed to be used as tooltip icon:     

  2. Text content
    Use a verb phrase to describe the action on an icon, for example (e.g. Edit settings). Use only plain text and be concise. Tooltips can be a sentence fragment. If more detailed information is required, use another form of help such as a message box or an overlayer.

  3. Container
    A container is displayed around the text content with a solid color. Set container width to the size of the text label with the padding on the left and right on desktop and set it relative to the width of the screen on mobile.

Best practise

  • Tooltips appear on hover, focus, or click, and disappear after a short duration.
  • Continuously display the tooltip as long as the user long-presses or hovers over the element.
  • Tooltips are always paired nearby the element with which they are associated.

        

  • Use tooltips when you need to provide an explanation for an element.
  • Use tooltips to add a floating label that briefly explains the function of a user interface element.

Do

        

  • For communicating critical information, like errors.
  • When you need to include links or actions.
  • When you have a long explanation.

Don't
Use a message box or an overlayer instead.

last modified: 30/09/2021 11:10:06
Info box

Please refer to the font sizes and colors default values.

Sizes

Attribute Mobile Tablet Desktop
1. Trigger Icon/Font size Min. 1.6 rem
2. Trigger padding Left 1 rem 0.5 rem
3. Container Padding
Rounded corner		 1 rem
0.5 rem
4. Content Font size Size 4
Attribute Mobile Tablet Desktop
Margin Left & right 2 rem 4 rem

Colors

Attribute Value
1. Trigger Icon color
Text color		 Purple
Depending of the context
2. Text content Text color Body text color
3. Container Background color
Shadow		 White
0 0 3px 0 rgba(0, 0, 0, 0.25)
Dark theme

There is no specific tooltip for the dark theme. The container and the text content of the tooltip are the same. Only the trigger will then take the color of the body text of the dark theme.

last modified: 08/09/2022 10:20:06

To add a tooltip to an element you should:

  • add the class has-tip
  • add the attribute data-tooltip=""
  • add content of your tooltip insie a title attribute
  • If the element is not clickable also add the tabindex="0" attribute
Tooltip position

Default position of tooltip is at the bottom, but a different position can be added to the tooltip by putting following class:
tip-top
tip-right
tip-left

Default tooltip

Razor

A tooltip can be created with @rsTooltips.rsStd() and can receive the following parameters:

Name Purpose Default value
hoverText The text present in your page to hover "Hover on desktop or touch me on mobile!"
tooltipText The content text of your tooltip "A fabulous tooltip"
position The position of your tooltip "tip-bottom"
htmlTag Define if you "text" will be in a span / p / div / etc. "span"
isClickable The tooltip is a clickable element
If yes, it will change the tabindex 		false
XtraClass Extra classes ""
XtraParameters Extra parameters/attributes ""
isDisabledOnMobile The tooltip is disabled on mobile only meaning it will only be visible on medium up false
Hover on desktop or touch me on mobile!

Different positions

Tooltip on top
Tooltip on the right
Tooltip on the left

Different html tag

This is a p

With a clickable element

This is a link with a tooltip

Disabled on mobile tooltip

Options

data-options="show_on:medium" attribute is added to the element who has a tooltip.

Hover on desktop, no tooltip on mobile

Icon tooltip

Available icons
  • icon-Information-box:
  • icon-Help:
Razor

Icon tooltip has two helpers available @rsTooltips.rsInfo() and @rsTooltips.rsHelp() and can receive the following parameters:

Name Purpose Default value
tooltipText The content text of your tooltip "A fabulous tooltip"
position The position of your tooltip "tip-bottom"
XtraClass Extra classes ""
XtraParameters Extra parameters/attributes ""
isDisabledOnMobile The tooltip is disabled on mobile only meaning it will only be visible on medium up false
iconXtraClass Extra classes on the i tag ""

With an info icon

With an help icon

Negative version

With an info icon

With an help icon

Icon tooltip opening an overlayer

You can open an overlayer with a tooltip icon , you can see example in overlayer page.

Javascript

How to trigger the js

Each time you add tooltip element to the page, a refresh of foundation is needed: $(document).foundation();

Deprecated

EXPIRY DATE: 30/04/2021

The popover below is not accessible and should no longer be used.
This element will no longer be available from the expiry date meaning the related css will be removed and the element design will be broken if it's not adapted to the new html.

Class rs-popover

Click me to see the popover!

This is the content of the fabulous popover!

Button
last modified: 16/09/2022 12:45:14

Configuration metadata

Selector: lib-tabs-button

Class: TabsComponent

Use case example

NOT AVAILABLE LIVE PREVIEW

Inputs

Name Type Default Required Description
id string undefined Yes Unique id of the component
tooltipText string undefined Yes The text shown by the tooltip
tooltipConfig ITooltipConfig undefined Yes Applies the configuration of the component
tooltipPosition TooltipPositionEnum undefined Yes Sets the position of the tooltip component

Outputs

None

Models

        export interface ITooltipConfig {
          disabledOnMobile?: boolean;
        }

        export enum TooltipPositionEnum {
            Top = 'top',
            Bottom = 'bottom',
            Right = 'right',
            Left = 'left',
        }