Open In App

Semantic-UI Popup Tooltip Type

Improve
Improve
Like Article
Like
Save
Share
Report

Semantic UI is a modern framework used in developing seamless designs for web pages, It gives the user a lightweight experience with its components. It uses predefined CSS and jQuery to incorporate different frameworks. it makes web pages look amazing and responsive.

Semantic UI Popup is used to display additional information through popups to the user. It alerts and provides the user with necessary information. Popups can help to save space and only show information when the user interacts with the webpage. 

Semantic-UI Popup Tooltip Type is used to specify the tooltip element that can appear without using JavaScript. The tooltip element uses :before and :after pseudo-classes. 

Semantic-UI Popup Tooltip Type Used Attribute:

  • data-tooltip: This attribute is used to display the tooltip popup box.

Syntax:

<div class="ui icon button" data-tooltip="" data-position="">
  <i class="icon-name icon"></i>
</div>

Example 1: In this example, we will describes the use of Semantic-UI Popup Tooltip Type.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>
        Semantic-UI Popup Tooltip Type
    </title>
  
    <link rel="stylesheet"
          href=
</head>
  
<body>
    <div class="ui container center aligned">
        <h2 style="color:green">
            GeeksforGeeks
        </h2>
  
        <h3>Semantic-UI Popup Tooltip Type</h3>
  
        <div class="ui icon button" 
             data-tooltip="GeeksforGeeks Comments">
            <i class="comment icon"></i>
        </div>
  
        <div class="ui button" 
             data-tooltip="HTML Tutorial" 
             data-position="top left">
            HTML
        </div>
  
        <div class="ui button" 
             data-tooltip="CSS Tutorial" 
             data-position="top right">
            CSS
        </div>
  
        <div class="ui button" 
             data-tooltip="JavaScript Tutorial" 
             data-position="bottom left">
            JavaScript
        </div>
  
        <div class="ui button" 
             data-tooltip="jQuery Tutorial" 
             data-position="bottom right">
            jQuery
        </div>
  
        <div class="ui button" 
             data-tooltip="Bootstrap Tutorial" 
             data-position="top center">
            Bootstrap
        </div>
  
        <div class="ui button" 
             data-tooltip="Angular.js Tutorial" 
             data-position="bottom center">
            Angular.js
        </div>
  
        <div class="ui button" 
             data-tooltip="React.js Tutorial" 
             data-position="left center">
            React.js
        </div>
          
        <div class="ui button" 
             data-tooltip="Node.js Tutorial" 
             data-position="right center">
            Node.js
        </div>
    </div>
</body>
  
</html>


Output:

Semantic-UI Popup Tooltip Type

Semantic-UI Popup Tooltip Type

Example 2: In this example, we will describe the use of Semantic-UI Popup Tooltip Type with inverted data variations.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>
        Semantic-UI Popup Tooltip Type
    </title>
  
    <link rel="stylesheet"
          href=
</head>
  
<body>
    <div class="ui container center aligned">
        <h2 style="color:green">
            GeeksforGeeks
        </h2>
  
        <h3>Semantic-UI Popup Tooltip Type</h3>
  
        <div class="ui icon button" 
             data-inverted=""
             data-tooltip="GeeksforGeeks Comments">
            <i class="comment icon"></i>
        </div>
  
        <div class="ui button" 
             data-inverted=""
              data-tooltip="HTML Tutorial" 
              data-position="top left">
            HTML
        </div>
  
        <div class="ui button"
             data-inverted=""
              data-tooltip="CSS Tutorial" 
              data-position="top right">
            CSS
        </div>
  
        <div class="ui button" 
             data-inverted=""
              data-tooltip="JavaScript Tutorial" 
              data-position="bottom left">
            JavaScript
        </div>
  
        <div class="ui button" 
             data-inverted=""
             data-tooltip="jQuery Tutorial" 
             data-position="bottom right">
            jQuery
        </div>
  
        <div class="ui button" 
             data-inverted=""
             data-tooltip="Bootstrap Tutorial" 
             data-position="top center">
            Bootstrap
        </div>
  
        <div class="ui button" 
             data-inverted=""
             data-tooltip="Angular.js Tutorial" 
             data-position="bottom center">
            Angular.js
        </div>
  
        <div class="ui button"
             data-inverted=""
             data-tooltip="React.js Tutorial" 
             data-position="left center">
            React.js
        </div>
  
        <div class="ui button"
             data-inverted=""
             data-tooltip="Node.js Tutorial" 
             data-position="right center">
            Node.js
        </div>
    </div>
</body>
  
</html>


Output:

Semantic-UI Popup Tooltip Type

Semantic-UI Popup Tooltip Type

Reference: https://semantic-ui.com/modules/popup.html#tooltip



Last Updated : 11 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads