Semantic-UI Popup Inverted Variation

Last Updated : 08 Mar, 2022

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 Inverted Variation is used to display the popup in inverted color. The inverted variation inverts the color and background color of the element.

Semantic-UI Popup Inverted Variation Attribute Value:

data-variation=”inverted”: This attribute value is used to create an inverted popup element.

Syntax:

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

Example 1: In this example, we will describe the Semantic-UI Popup Inverted Variation.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        Semantic-UI Popup Inverted Variation 
    </title> 
    <link rel="stylesheet" href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> 
    <script src= 
"https://code.jquery.com/jquery-3.1.1.min.js"> 
    </script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> 
    </script> 
</head> 
<body> 
    <div class="ui container center aligned"> 
        <h2 style="color:green"> 
            GeeksforGeeks 
        </h2> 
  
        <h3>Semantic-UI Popup Inverted Variation</h3> 
  
        <div class="ui icon button" 
             data-content="Welcome GeeksforGeeks" 
            data-variation="inverted"> 
            <i class="laptop icon"></i> 
        </div> 
  
        <div class="ui icon button" 
             data-content="5th Floor, A-118, Sector-136,  
                           Noida, Uttar Pradesh - 201305" 
             data-variation="inverted"> 
            <i class="map marker icon"></i> 
        </div> 
    </div> 
    <script> 
        $('.icon').popup() 
    </script> 
</body> 
</html>

Output:

Semantic-UI Popup Inverted Variation

Example 2: In this example, we will describe the Semantic-UI Popup Inverted Variation.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        Semantic-UI Popup Inverted Variation 
    </title> 
    <link rel="stylesheet" 
          href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> 
    <script src= 
"https://code.jquery.com/jquery-3.1.1.min.js"> 
    </script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> 
    </script> 
</head> 
  
<body> 
    <div class="ui container center aligned"> 
        <h2 style="color:green"> 
            GeeksforGeeks 
        </h2> 
  
        <h3>Semantic-UI Popup Inverted Variation</h3> 
  
        <i class="circular big laptop icon" 
            data-content="Welcome GeeksforGeeks" 
            data-variation="inverted"> 
        </i> 
  
        <i class="circular large map icon button" 
            data-content="5th Floor, A-118, Sector-136,  
                          Noida, Uttar Pradesh - 201305"  
            data-variation="inverted"> 
        </i> 
    </div> 
  
    <script> 
        $('.icon').popup() 
    </script> 
</body> 
  
</html>