Foundation CSS Tooltip Explicit Positioning

Last Updated : 10 Mar, 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.

In Foundation CSS, tooltips are used to define both positions for the tip. Using this tooltip you can use data-position along with data-alignment for defining the positions of the box.

There are 4 valid positions and alignments i.e. left, right, top, and bottom respectively.

Foundation CSS Tooltip Explicit Positioning data-position attribute values used:

left: It is used to place the tooltip at the left.
right: It is used to place the tooltip at the right.
top: It is used to place the tooltip at the top.
bottom: It is used to place the tooltip at the bottom.

Foundation CSS Tooltip Explicit Positioning data-alignment attribute values used:

left: It is used to align the tooltip pointer left with respect to the button.
right: It is used to align the tooltip pointer right with respect to the button.
top: It is used to align the tooltip pointer top with respect to the button.
bottom: It is used to align the tooltip pointer bottom with respect to the button.

Syntax:

<button class="button" type="button"
        data-tooltip  title="..."
        data-alignment="left/right/top/bottom"
        data-position="top/bottom/left/right">
    ...
</button>

Example 1:

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
  <title>Foundation CSS Tooltip Explicit Position</title> 
    
  <link rel="stylesheet" 
        href= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"
        crossorigin="anonymous"> 
  
  <script src= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js" 
          crossorigin="anonymous"> 
  </script> 
  
  <link rel="stylesheet"
        href= 
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.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.5.1/dist/js/foundation.min.js" 
          crossorigin="anonymous"> 
  </script> 
</head> 
  
  
<body> 
  <center> 
    <h1 style="color:green;"> 
      GeeksforGeeks 
    </h1> 
  
    <h3>Foundation CSS Tooltip Explicit Position</h3> 
  
    <button class="button success" 
            type="button" 
             data-tooltip  
            title="GeeksforGeeks" 
             data-alignment="left" 
            data-position="top"> 
       Top and Left 
    </button> 
  
    <button class="button warning"
            type="button" 
             data-tooltip   
            title="GeeksforGeeks" 
             data-alignment="center" 
            data-position="top"> 
       Top and Center 
    </button> 
  
    <button class="button alert" 
            type="button" 
            data-tooltip  
            title="GeeksforGeeks" 
            data-alignment="right" 
            data-position="top"> 
       Top and Right 
    </button> 
  </center> 
  
  <script> 
    $(document).ready(function () { 
      $(document).foundation(); 
    }) 
  </script> 
</body> 
  
</html>

Output:

Foundation CSS Tooltip Explicit Positioning

Example 2:

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
  <title>Foundation CSS Tooltip Explicit Position</title> 
    
  <link rel="stylesheet"
        href= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"
        crossorigin="anonymous"> 
  <script src= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js" 
          crossorigin="anonymous"> 
  </script> 
  <link rel="stylesheet"
        href= 
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.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.5.1/dist/js/foundation.min.js" 
          crossorigin="anonymous"> 
  </script> 
</head> 
  
  
<body> 
  <center> 
    <h1 style="color:green;"> 
      GeeksforGeeks 
    </h1> 
  
    <h3>Foundation CSS Tooltip Explicit Position</h3> 
  
    <button class="button success"
            type="button" 
            data-tooltip  
            title="GeeksforGeeks" 
            data-position="left" 
            data-alignment="top"> 
      pos: Left and align: Top 
    </button> 
  
    <button class="button warning"
            type="button" 
            data-tooltip  
            title="GeeksforGeeks" 
            data-position="left"
            data-alignment="center"> 
      pos: Left and align: Center 
    </button> 
  
    <button class="button alert" 
            type="button" 
            data-tooltip 
            title="GeeksforGeeks" 
            data-position="left"
            data-alignment="bottom"> 
      pos: Left and align: Bottom 
    </button> 
  
    <br> 
    <br> 
    <br> 
      
    <button class="button alert" 
            type="button" 
            data-tooltip  
            title="GeeksforGeeks" 
            data-position="right"
            data-alignment="top"> 
        pos: Right and align: Top 
    </button> 
      
    <button class="button warning"
            type="button" 
            data-tooltip  
            title="GeeksforGeeks" 
            data-position="right" 
            data-alignment="center"> 
      pos: Right and align: Center 
    </button> 
    
    <button class="button success" 
            type="button" 
            data-tooltip 
            title="GeeksforGeeks" 
            data-position="right"
            data-alignment="bottom"> 
      pos: Right and align: Bottom 
    </button> 
  </center> 
  
  <script> 
    $(document).ready(function () { 
      $(document).foundation(); 
    }) 
  </script> 
</body> 
  
</html>