Semantic-UI Popup Basic Variation - Coding

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>

Output:

Semantic-UI Popup Basic Variation

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

Reffered: https://www.geeksforgeeks.org

CSS

Related
Semantic-UI Segment Text Alignment Variation
Semantic-UI Header Dividing Variations
Semantic-UI Input Labeled Variation
Semantic-UI Dropdown Multiple Selection Type
Semantic-UI Progress Attached Variation

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	9