Foundation CSS Tooltip Sass Reference

Last Updated : 30 Aug, 2022

Foundation CSS is an open-source and 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 and 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 controls the website. Tooltip is a very common feature in modern websites.

Variable Used:

Variable-Name	Description	Type	Default Value
$has-tip-cursor	This variable is used to define the default cursor of the defined term.	Keyword	help
$has-tip-font-weight	This variable is used to define the default font weight of the defined term.	Keyword or Number	$global-weight-bold
$has-tip-border-bottom	This variable is used to define the default border-bottom of the defined term.	List	dotted 1px $dark-gray
$tooltip-background-color	This variable is used to define the default padding of the tooltip background.	Color	$black
$tooltip-color	This variable is used to define the default color of the tooltip font.	Color	$white
$tooltip-padding	This variable is used to define the default padding of the tooltip background.	Number	0.75rem
$tooltip-max-width	This variable is used to define the default max width for tooltips.	Number	10rem
$tooltip-font-size	This variable is used to define the default font size of the tooltip text.	Number	$small-font-size
$tooltip-pip-width	This variable is used to define the default pip width for tooltips.	Number	0.75rem
$tooltip-pip-height	This variable is used to define the default pip height for tooltips.	Number	$tooltip-pip-width * 0.866
$tooltip-radius	This variable is used to define the default radius for tooltips.	Number	$global-radius

Example 1: In the below code, we will make use of the above variable to demonstrate the use of Tooltip.

HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content=
"width=device-width,initial-scale=1">
    <!-- Compressed CSS -->
    
    <link rel="stylesheet" href="style.css">

    <title>GeeksforGeeks</title>
   <!-- font-awesome cdn -->
      <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css" />
 
    <!-- Compressed JavaScript -->
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js">
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js">
    </script>
</head>

<body>
    <center>
        <h1 class="title" style="color:green;" >
            GeeksforGeeks
        </h1>        
        <h3 class="subtitle">
            A computer science portal for geeks
        </h3>
        
        <span data-tooltip tabindex="1" title="Tooltip">
            Hover over me
        </span>  
    
    </center>   
</body>
</html>

SASS Code:

$tooltip-color :green;
span{
  color:$tooltip-color ;
}

Compiled CSS Code:

span {
 color: green; 
}

Output:

Example 2: In the below code, we will make use of the above variable to demonstrate the use of Tooltip.

HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content=
"width=device-width,initial-scale=1">
    <!-- Compressed CSS -->
    
    <link rel="stylesheet" href="style.css">

    <title>GeeksforGeeks</title>
   <!-- font-awesome cdn -->
      <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css" />
 
    <!-- Compressed JavaScript -->
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js">
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js">
    </script>
</head>

<body>
    <center>
        <h1 class="title" style="color:green;" >
            GeeksforGeeks
        </h1>        
        <h3 class="subtitle">
            A computer science portal for geeks
        </h3>        
        <span data-tooltip tabindex="1" title="Tooltip">
            Hover over me
        </span>      
    </center>   
</body>
</html>

SASS Code:

$tooltip-background-color:green;
span{
  background-color:$tooltip-background-color;
}

CSS Compile:

span {
 background-color: green; }

Output:

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

Foundation CSS Top Bar Sass Reference

pall58183

Improve

Article Tags :

Foundation CSS Tooltip Sass Reference

Similar Reads

Thank You!

What kind of Experience do you want to share?