Primer CSS Tooltips with Multiple Lines

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 Multiple Lines is mainly used when the content we want to display in the tooltip is long(lengthwise), by specifying the tooltipped-multiline modifier on the tooltip component to make the tooltip message wrap to the next lines. The multiline tooltips have a maximum width of 250px.

Primer CSS Tooltips with Multiple Lines Class:

tooltipped-multiline: This class is used to make the tooltip expand to multiple lines.

Syntax:

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

Example 1: This example displays the implementation of the tooltipped-multiline modifier on the tooltip component to make it multiline.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width,  
                   initial-scale=1.0"> 
    <title>Tooltip Multiline - 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>Tooltip Multiline - Primer CSS</h4> 
    </div> 
    <div class="d-flex flex-justify-center mt-5 flex-wrap"> 
        <button type="button" 
                class="tooltipped tooltipped-s  
                tooltipped-multiline p-2 border" 
                aria-label= 
                "This is a multiline tooltip.  
                The long content will wrap on 
                the next lines.">  
                    Multiline Tooltip 
        </button> 
    </div> 
</body> 
</html>

Output:

Primer CSS Multiline Tooltip

Example 2: This example displays the implementation of the multiline tooltips with different tooltips directions.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width,  
                   initial-scale=1.0"> 
    <title>Tooltip Multiline - 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>Tooltip Multiline - Primer CSS</h4>  
    </div> 
    <div class="d-flex flex-justify-center mt-5 flex-wrap"> 
        <button type="button" 
                class="tooltipped tooltipped-n  
                    tooltipped-multiline m-2 p-2 border"  
                aria-label= 
                    "Multiline Tooltip to the North.  
                    The Long content will be wrapped on new lines."> 
                    Multiline Tooltip to the North  
        </button> 
        <button type="button" 
                class="tooltipped tooltipped-s  
                    tooltipped-multiline m-2 p-2 border"  
                aria-label= 
                    "Multiline Tooltip to the South.  
                    The Long content will be wrapped on new lines."> 
                    Multiline Tooltip to the South  
        </button> 
        <button type="button" 
                class="tooltipped tooltipped-e  
                    tooltipped-multiline m-2 p-2 border"  
                aria-label= 
                    "Multiline Tooltip to the East.  
                    The Long content will be wrapped on new lines."> 
                    Multiline Tooltip to the East  
        </button> 
        <button type="button" 
                class="tooltipped tooltipped-w  
                    tooltipped-multiline m-2 p-2 border"  
                aria-label= 
                    "Multiline Tooltip to the West.  
                    The Long content will be wrapped on new lines."> 
                    Multiline Tooltip to the West  
        </button> 
    </div> 
</body> 
</html>