Primer CSS Tooltips with No Delay

Last Updated : 08 Apr, 2022

Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by Object-Oriented CSS principles, functional CSS, and BEM architecture. It is highly reusable and flexible. It is created with GitHub’s design system.

Primer CSS Tooltips are used to provide interactive textual hints to the user about the element when the mouse pointer moves over. The Tooltips with no Delay help to appear the text or information with a slight delay, by default, when the element is hovered or come into focus but this delay can be removed by using the tooltipped-no-delay modifier on the tooltip component.

Primer CSS Tooltips with No Delay Attribute:

tooltipped-no-delay: This attribute is used on the tooltip component to remove the delay in showing the tooltip.

Syntax:

<element class="tooltipped tooltipped-nw tooltipped-no-delay">
    ...
</element>

Example 1: The below example illustrates the implementation of the Tooltips with No Delay in Primer CSS by specifying the tooltipped-no-delay modifier to remove the delay in the opening of the tooltip.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0"> 
  
    <title> 
        Tooltip with no delay - Primer CSS 
    </title> 
    <link href= 
"https://unpkg.com/@primer/css@^16.0.0/dist/primer.css" 
        rel="stylesheet" /> 
</head> 
  
<body> 
    <div class="text-center"> 
        <h2>GeeksforGeeks</h2> 
        <h4>Primer CSS - Tooltip with no delay</h4> 
    </div> 
      
    <div class="d-flex flex-justify-center mt-3 flex-wrap"> 
        <button type="button" class="tooltipped  
            tooltipped-nw tooltipped-no-delay m-2 p-2 border" 
            aria-label="Tooltip with no delay"> 
            Tooltip with no delay 
        </button> 
        <button type="button" class="tooltipped  
            tooltipped-nw m-2 p-2 border"  
            aria-label="Tooltip with default delay"> 
            Tooltip with default delay 
        </button> 
    </div> 
</body> 
  
</html> 

Output:

Primer CSS Tooltip with no delay

Example 2: This example shows the use of the tooltipped-no-delay modifier with the multiline tooltip.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0"> 
    <title> 
        Tooltip with no delay - Primer CSS 
    </title> 
    <link href= 
"https://unpkg.com/@primer/css@^16.0.0/dist/primer.css" 
        rel="stylesheet" /> 
</head> 
  
<body> 
    <div class="text-center"> 
        <h2>GeeksforGeeks</h2> 
        <h4>Primer CSS - Multiline Tooltip with no delay</h4> 
    </div> 
  
    <div class="d-flex flex-justify-center mt-3 flex-wrap"> 
        <button type="button" class="tooltipped  
            tooltipped-sw tooltipped-no-delay m-2 p-2 border" 
            aria-label="This is a simple tooltip with no delay"> 
            Simple Tooltip with no delay 
        </button> 
  
        <button type="button" class="tooltipped  
            tooltipped-multiline tooltipped-no-delay  
            tooltipped-se m-2 p-2 border" 
            aria-label="This is a multiline tooltip  
            with no delay. Multiline tooltips have  
            a max-width of 250px"> 
            Multiline Tooltip with no delay 
        </button> 
    </div> 
</body> 
  
</html> 