Payroc Design logo
  • Our brand
    Mission statement Personality Values Assets
  • Content guidelines
    Voice and tone Grammar and formatting Inclusive language Writing style guides
  • Design system
    Get started Essentials Components Patterns
Submit a design request
  1. Payroc design
  2. Design system
  3. Components
  4. Tooltip

Tooltip

To provide the user with useful information when they hover, click, focus or tap.

Anatomy

Diagram of a tool tip component.
  1. Background
  2. Body

Example

Coded example

Code snippet

HTML JavaScript
									
<i class="fa-regular fa-circle-info tooltip-trigger" data-toggle="tooltip" data-html="true" data-placement="top" title="<strong>Lorem ipsum dolor</strong> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."></i>
          
								
									
$(function () {
  $('[data-toggle="tooltip"]').tooltip({ boundary: 'viewport'})
})
          
								

Figma prototype

Usage guide

Dos and don'ts

To call out the difference between similar actions.

Short descriptive message.

Make it easy to dismiss.

Don’t repeat text already on the action. Don’t overload it with detail and shadows. Keep it basic.

Hide actions in tool tips.

Long content. Should be short and to the point.

Payroc Design logo

Copyright © Payroc

    Our brand
  • Mission statement
  • Personality
  • Values
  • Assets
  • Brand Guide for Sales Partners
    Content guidelines
  • Voice and tone
  • Grammar and formatting
  • Inclusive lanugage
  • Writing style guides
    Design system
  • Get started
  • Essentials
  • Components
  • Patterns