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">
<link rel="stylesheet" href="style.css">
<title>GeeksforGeeks</title>
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</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">
<link rel="stylesheet" href="style.css">
<title>GeeksforGeeks</title>
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...