Foundation CSS Tooltip

Last Updated : 23 Feb, 2022

Foundation CSS is an open-source & responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails to look amazing & can be accessible to any device. It is used by many companies such as Facebook, eBay, Mozilla, Adobe, and even Disney. The framework is built on Saas-like bootstrap. It is more sophisticated, flexible, and easily customizable. It also comes with CLI, so it’s easy to use it with module bundlers. It offers the Fastclick.js tool for faster rendering on mobile devices.

A Tooltip is a small text or sometimes a word that appears when the user moves the mouse over a particular word or a particular button or control in the website. Tooltip is a very common feature in modern websites.

Note: You must-have foundation CSS downloaded into your system from the official website of Foundation CSS.

Foundation CSS tooltip attributes:

data-tooltip: This attribute tells the browser that the element in which it is mentioned is a tooltip.
title: This attribute contains the value that will be shown inside the tooltip (i.e. it is basically the tip text) when the user hovers over the particular element.

Syntax:

<span data-tooltip tabindex="1" title="...">...</span>

Example: The following code demonstrates the simple tooltip. The working folder should have the downloaded "Foundation-Sites-CSS" folder and needed pre-compiled files.

HTML

<!doctype html>
<html class="no-js" lang="en" dir="ltr">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <title>Foundation for Sites</title>
    <link rel="stylesheet" href=
        "Foundation-Sites-CSS/css/foundation.css">
    <link rel="stylesheet" href=
        "Foundation-Sites_CSS/css/app.css">
</head>

<body>
    <h1>Foundation CSS tooltip</h1>
    <span data-tooltip tabindex="1" 
        title="Tooltip">Hover over me 
    </span>

    <script src=
        "Foundation-Sites-CSS/js/vendor/jquery.js">
    </script>
    <script src=
        "https://code.jquery.com/jquery-2.1.4.min.js">
    </script>
    <script src=
"https://dhbhdrzi4tiry.cloudfront.net/cdn/sites/foundation.js">
    </script>
    <script src=
        "Foundation-Sites-CSS/js/vendor/foundation.js">
    </script>
    <script src="Foundation-Sites-CSS/js/app.js"></script>
</body>

</html>

Output:

Positioning of Tooltip: The class attribute helps us to position the tooltip in a different position.

Tooltip position classes:

top: This class is used to set the tooltip at the top.
bottom: This class is used to set the tooltip at the bottom.
left: This class is used to set the tooltip at the left.
right: This class is used to set the tooltip at the right

Syntax:

 <span class="top" data-tooltip tabindex="1" title="...">...</span>

Example: The following code displays the position of the tooltip to the right. The developer can make changes according to the need. In the below code, we assigned a tooltip to the "Hover over me" text which will appear on the right.

HTML

<!doctype html>
<html class="no-js" lang="en" dir="ltr">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Foundation Sites</title>
    <link rel="stylesheet" href="Foundation-Sites-CSS/css/foundation.css">
    <link rel="stylesheet" href="Foundation-Sites_CSS/css/app.css">
  
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>      
    <script src="Foundation-Sites-CSS/js/vendor/jquery.js"></script>   
    <script src="Foundation-Sites-CSS/js/vendor/foundation.js"></script>
    <script src="Foundation-Sites-CSS/js/app.js"></script>
</head>

<body>
    <h1 style="color:green;">GeeksforGeeks</h1>
    <h1>Foundation CSS tooltip</h1>
    <span data-tooltip style="margin:5em" class="right" 
          tabindex="1" title="Tooltip">Hover over me </span>
</body>
</html>

Output:

Explicit Positioning of Tooltip and its Data: We can position the tooltip and the tip using the “data-position” and the “data-alignment” attribute. The “data-alignment” helps us to align the text inside the tooltip in a different position.

Foundation CSS attributes:

data-position: This attribute helps us to position the tooltip in different directions of the element ( top, right, left, or bottom ) according to the mentioned value.
data-alignment: This attribute helps to align the text inside the tooltip (i.e the tip) like aligning to left, right, or center according to the given value.

Syntax:

<button class="button" type="button" data-tooltip tabindex="1" 
     title="..." data-position="right" data-alignment="right">
  ....
</button>

Example 1: The tooltip is positioned at the bottom using the "data-position" attribute set to "bottom". Now, we can also align the text inside the tooltip using the "data-alignment" attribute to left, right, or center. We have created three buttons with tooltip at the bottom and each of their aligned to different positions respectively.

HTML

<!doctype html>
<html class="no-js" lang="en" dir="ltr">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Foundation for Sites</title>
    <link rel="stylesheet" href="Foundation-Sites-CSS/css/foundation.css">
    <link rel="stylesheet" href="Foundation-Sites_CSS/css/app.css">
    
    <script src="Foundation-Sites-CSS/js/vendor/jquery.js"></script>
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src=
           "https://dhbhdrzi4tiry.cloudfront.net/cdn/sites/foundation.js">
      </script>
    <script src="Foundation-Sites-CSS/js/vendor/foundation.js"></script>
    <script src="Foundation-Sites-CSS/js/app.js"></script>
</head>

<body>
    <h1 style="color:green;">GeeksforGeeks</h1>
    <h1>Foundation CSS tooltip</h1>
    <button style="margin:8em;" class="button" type="button" 
           data-tooltip tabindex="1" title="Fancy word for a beetle."
           data-position="bottom" data-alignment="left">
        Bottom Left
    </button>

    <button style="margin:8em;" class="button" type="button" 
           data-tooltip tabindex="1" title="Fancy word for a beetle."
           data-position="bottom" data-alignment="center">
        Bottom Center
    </button>

    <button style="margin:8em;" class="button" type="button" 
         data-tooltip tabindex="1" title="Fancy word for a beetle."
         data-position="bottom" data-alignment="right">
        Bottom Right
    </button>    
</body>
  
</html>

Output:

Example 2: The tooltip is positioned at the top using the "data-position" attribute set to "top". Now, we can also align the text inside the tooltip using the "data-alignment" attribute to left, right, or center. In the below code example, we have created three buttons with their tooltips at the top and aligned to different positions respectively.

HTML

<!doctype html>
<html class="no-js" lang="en" dir="ltr">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Foundation CSS Sites</title>
    <link rel="stylesheet" href="Foundation-Sites-CSS/css/foundation.css">
    <link rel="stylesheet" href="Foundation-Sites_CSS/css/app.css">
  
    <script src="Foundation-Sites-CSS/js/vendor/jquery.js"></script>
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src=
        "https://dhbhdrzi4tiry.cloudfront.net/cdn/sites/foundation.js">
      </script>
    <script src="Foundation-Sites-CSS/js/vendor/foundation.js"></script>
    <script src="Foundation-Sites-CSS/js/app.js"></script>
</head>

<body>
    <h1 style="color:green;">GeeksforGeeks</h1>
    <h1>Foundation CSS tooltip</h1>
    <button style="margin:8em;" class="button" type="button" 
            data-tooltip tabindex="1" title="Fancy word for a beetle."
            data-position="top" data-alignment="left">
        Top Left
    </button>

    <button style="margin: 8em;" class="button" type="button" 
             data-tooltip tabindex="1" title="Fancy word for a beetle."
             data-position="top" data-alignment="center">
        Top Center
    </button>

    <button style="margin: 8em;" class="button" type="button" 
            data-tooltip tabindex="1" title="Fancy word for a beetle."
            data-position="top" data-alignment="right">
        Top Right
    </button>    
</body>
</html>

Output:

Example 3: The tooltip is positioned in the left using the "data-position" attribute set to "left". Now, we can also align the text inside the tooltip using the "data-alignment" attribute to left, right, or center. In the below code example, we have created three buttons with tooltip in the left and each at different positions respectively.

HTML

<!doctype html>
<html class="no-js" lang="en" dir="ltr">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Foundation CSS Sites</title>
    <link rel="stylesheet" href="Foundation-Sites-CSS/css/foundation.css">
    <link rel="stylesheet" href="Foundation-Sites_CSS/css/app.css">
  
    <script src="Foundation-Sites-CSS/js/vendor/jquery.js"></script>
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="https://dhbhdrzi4tiry.cloudfront.net/cdn/sites/foundation.js">
    </script>
    <script src="Foundation-Sites-CSS/js/vendor/foundation.js"></script>
    <script src="Foundation-Sites-CSS/js/app.js"></script>
</head>

<body>
    <h1 style="color:green;">GeeksforGeeks</h1>
    <h1>Foundation CSS tooltip</h1>
    <button style="margin: 12em;" class="button" type="button" 
            data-tooltip tabindex="1"
            title="Fancy word for a beetle." data-position="left" 
            data-alignment="top">
        Left Top
    </button>

    <button style="margin:8em;" class="button" type="button" 
            data-tooltip tabindex="1" title="Fancy word for a beetle."
            data-position="left" data-alignment="center">
        Left Center
    </button>

    <button style="margin:8em;" class="button" type="button" 
            data-tooltip tabindex="1" title="Fancy word for a beetle."
            data-position="left" data-alignment="bottom">
        Left Bottom
    </button>    
</body>
</html>

Output:

Example 4: The tooltip is positioned in the right using the "data-position" attribute set to "right". Now, we can also align the text inside the tooltip using the "data-alignment" attribute to left, right, or center. In the below code example, we have created three buttons with tooltip in the left and each at different positions respectively.

HTML

<!doctype html>
<html class="no-js" lang="en" dir="ltr">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Foundation CSS Sites</title>
    <link rel="stylesheet" href="Foundation-Sites-CSS/css/foundation.css">
    <link rel="stylesheet" href="Foundation-Sites_CSS/css/app.css">
  
    <script src="Foundation-Sites-CSS/js/vendor/jquery.js"></script>
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="https://dhbhdrzi4tiry.cloudfront.net/cdn/sites/foundation.js"></script>
    <script src="Foundation-Sites-CSS/js/vendor/foundation.js"></script>
    <script src="Foundation-Sites-CSS/js/app.js"></script>
</head>

<body>
    <h1 style="color:green;">GeeksforGeeks</h1>
    <h2>Foundation CSS Tooltip</h2>
    <button style="margin: 8em;" class="button" type="button" 
             data-tooltip tabindex="1" title="Fancy word for a beetle."
             data-position="right" data-alignment="top">
        Right Top
    </button>

    <button style="margin:8em;" class="button" type="button" 
            data-tooltip tabindex="1" title="Fancy word for a beetle."
            data-position="right" data-alignment="center">
        Right Center
    </button>

    <button style="margin: 8em;" class="button" type="button"
            data-tooltip tabindex="1" title="Fancy word for a beetle."
            data-position="right" data-alignment="bottom">
        Right Bottom
    </button>
</body>
</html>

Output:

Note: In the article, we have used the tooltip inside the span or button elements. But we can use the tooltip inside others elements too. It is not restricted to certain elements.

Reference: https://get.foundation/sites/docs/tooltip.html