Foundation CSS Kitchen Sink Tooltip

Last Updated : 27 Feb, 2022

Foundation CSS is the frontend framework of CSS that is used to build responsive websites, apps, and emails that work perfectly on any device. It is written using HTML, CSS, and Javascript and is used by many famous companies like Amazon, Facebook, eBay, etc. It uses packages like Grunt and Libsass for fast coding and controlling and Saas compiler to make development faster.

Kitchen Sink has the elements to work in websites and applications. Tooltip is the small dialog box that shows some message when we hover the mouse on the link. When we want to display some important message when some link hovers then we can do this with the help of a tooltip.

Foundation CSS Kitchen Sink Tooltip Class:

has-tip: It is used to create a popup box for that text to be displayed when we hover over the link.

Syntax:

<span data-tooltip aria-haspopup="true"
      class="has-tip">
          ...
</span>

Example 1:

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title>Foundation CSS Kitchen Sink Tooltip</title> 
    <link rel="stylesheet"
          href= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"> 
    </script> 
    <script src= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"> 
    </script> 
</head> 
  
<body> 
    <h1 style="color: green;"> 
        GeeksforGeeks 
    </h1> 
    <h3>Foundation CSS Kitchen Sink Tooltip</h3> 
    <p>A Computer Science portal for  
        <span data-tooltip aria-haspopup="true" 
              class="has-tip" 
              data-disable-hover="false"
              tabindex=1
              title="This is tooltip example">geeks</span>.  
        It contains well written, well thought and well 
        explained computer science and programming articles</p> 
  
    <script> 
        $(document).ready(function () { 
            $(document).foundation(); 
        }) 
    </script> 
</body> 
  
</html>

Output:

Foundation CSS Kitchen Sink Tooltip

Example 2:

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <link rel="stylesheet"
          href= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"> 
    </script> 
    <script src= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"> 
    </script> 
</head> 
  
<body> 
    <h1 style="color: green;"> 
        GeeksforGeeks 
    </h1> 
    <h3>Foundation CSS Kitchen Sink Tooltip</h3> 
  
    <p>A Computer Science portal for  
      <span data-tooltip aria-haspopup="true" 
            class="has-tip" 
            data-disable-hover="false"
            tabindex=1 
            title="This is tooltip example">geeks</span>. 
        It contains well written, well thought and well 
        explained computer science and programming articles</p> 
  
    <span data-tooltip aria-haspopup="true" 
          class="has-tip" 
          data-disable-hover="false" 
          tabindex=2
          title="This is GeeksforGeeks Image"> 
      <img src= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> 
    </span> 
  
    <strong> 
        <span data-tooltip aria-haspopup="true"
                    class="has-tip"
                    data-disable-hover="false"
                    tabindex=1
                    title="A Computer Science portal for geeks"> 
        GeeksforGeeks 
        </span> 
    </strong> 
    <script> 
        $(document).ready(function () { 
            $(document).foundation(); 
        }) 
    </script> 
</body> 
  
</html>