Semantic-UI Popup Basic 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 Basic Variation is used to display a popup box that can provide some more basic formatting.

Semantic-UI Popup Basic Variation Attribute Value:

data-variation=”basic”: This attribute is used to display the basic popup information.

Syntax:

<div class="ui icon button" data-content="" 
     data-variation="basic">
      <i class="add icon"></i>
</div>

Example 1: In this example, we will describe the Popup Basic Variation.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        Semantic-UI Popup Basic 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 Basic Variation</h3> 
  
        <div class="ui icon button" 
             data-content="Welcome GeeksforGeeks" 
             data-variation="basic"> 
            <i class="laptop icon"></i> 
        </div> 
  
        <div class="ui icon button" 
             data-content="Noida" 
             data-variation="basic"> 
            <i class="map marker icon"></i> 
        </div> 
    </div> 
  
    <script> 
        $('.icon').popup() 
    </script> 
</body> 
  
</html>

Output:

Example 2: In this example, we will describe the Popup Basic Variation.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        Semantic-UI Popup Basic 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 Basic Variation</h3> 
  
        <i class="circular big laptop icon" 
            data-content="Welcome GeeksforGeeks" 
            data-variation="basic"> 
        </i> 
  
        <i class="circular large map icon button" 
            data-content="Noida" data-variation="basic"> 
        </i> 
    </div> 
  
    <script> 
        $('.icon').popup() 
    </script> 
</body> 
  
</html>