Primer CSS Tooltip Direction

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 or is in focus. It is, by default, is hidden. The Tooltip Direction can be specified using the north, south, east, and west directions.

Primer CSS Tooltip Direction Class:

tooltipped-n: This class is used to set the direction of the tooltip to the north of the element.
tooltipped-s: This class is used to set the direction of the tooltip to the south of the element.
tooltipped-e: This class is used to set the direction of the tooltip to the east of the element.
tooltipped-w: This class is used to set the direction of the tooltip to the west of the element.
tooltipped-nw: This class is used to set the direction of the tooltip to the northwest of the element.
tooltipped-ne: This class is used to set the direction of the tooltip to the northeast of the element.
tooltipped-sw: This class is used to set the direction of the tooltip to the southwest of the element.
tooltipped-se: This class is used to set the direction of the tooltip to the southeast of the element.

Syntax:

<element class="tooltipped tooltipped-n border">
   Content
</element>

Example 1: This example displays the implementation of the tooltip direction classes to set the direction of the tooltips in Primer CSS.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width,  
                   initial-scale=1.0"> 
    <title>Tooltip Direction - 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 Direction</h4> 
    </div> 
    <div class="d-flex flex-justify-center mt-5 flex-wrap"> 
        <button type="button" 
                class="tooltipped tooltipped-n m-2 p-2 border" 
                aria-label="Tooltip to the North."> 
                    Tooltip to the North  
        </button> 
        <button type="button" 
                class="tooltipped tooltipped-s m-2 p-2 border" 
                aria-label="Tooltip to the South."> 
                    Tooltip to the South  
        </button> 
        <button type="button" 
                class="tooltipped tooltipped-e m-2 p-2 border" 
                aria-label="Tooltip to the East."> 
                    Tooltip to the East  
        </button> 
        <button type="button" 
                class="tooltipped tooltipped-w m-2 p-2 border" 
                aria-label="Tooltip to the West."> 
                    Tooltip to the West  
        </button> 
        <button type="button" 
                class="tooltipped tooltipped-nw m-2 p-2 border" 
                aria-label="Tooltip to the NorthWest."> 
                    Tooltip to the NorthWest  
        </button> 
        <button type="button" 
                class="tooltipped tooltipped-ne m-2 p-2 border" 
                aria-label="Tooltip to the NorthEast."> 
                    Tooltip to the NorthEast  
        </button> 
        <button type="button" 
                class="tooltipped tooltipped-sw m-2 p-2 border" 
                aria-label="Tooltip to the SouthWest."> 
                    Tooltip to the SouthWest  
        </button> 
        <button type="button" 
                class="tooltipped tooltipped-se m-2 p-2 border" 
                aria-label="Tooltip to the SouthEast."> 
                    Tooltip to the SouthEast  
        </button> 
    </div> 
</body> 
</html>

Output:

Primer CSS Tooltip Direction

Example 2: This example displays the implementation of the tooltip direction class with a tooltipped-no-delay class 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 Direction - 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 Direction with no delay</h4> </div> 
    <div class="d-flex flex-justify-center mt-5 flex-wrap"> 
        <button type="button" 
                class="tooltipped tooltipped-n  
                tooltipped-no-delay m-2 p-2 border"  
                aria-label="Tooltip to the North."> 
                    Tooltip to the North  
        </button> 
        <button type="button" 
                class="tooltipped tooltipped-s  
                tooltipped-no-delay m-2 p-2 border"  
                aria-label="Tooltip to the South."> 
                    Tooltip to the South  
        </button> 
        <button type="button" 
                class="tooltipped tooltipped-e  
                tooltipped-no-delay m-2 p-2 border"  
                aria-label="Tooltip to the East."> 
                    Tooltip to the East  
        </button> 
        <button type="button" 
                class="tooltipped tooltipped-w  
                tooltipped-no-delay m-2 p-2 border"  
                aria-label="Tooltip to the West."> 
                    Tooltip to the West  
        </button> 
        <button type="button" 
                class="tooltipped tooltipped-nw  
                tooltipped-no-delay m-2 p-2 border"  
                aria-label="Tooltip to the NorthWest."> 
                    Tooltip to the NorthWest  
        </button> 
        <button type="button" 
                class="tooltipped tooltipped-ne  
                tooltipped-no-delay m-2 p-2 border"  
                aria-label="Tooltip to the NorthEast."> 
                    Tooltip to the NorthEast  
        </button> 
        <button type="button" 
                class="tooltipped tooltipped-sw  
                tooltipped-no-delay m-2 p-2 border"  
                aria-label="Tooltip to the SouthWest."> 
                    Tooltip to the SouthWest  
        </button> 
        <button type="button" 
                class="tooltipped tooltipped-se  
                tooltipped-no-delay m-2 p-2 border"  
                aria-label="Tooltip to the SouthEast."> 
                    Tooltip to the SouthEast  
        </button> 
    </div> 
</body> 
  
</html>