Semantic-UI Popup Size Variation

Last Updated : 22 Feb, 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.

The Semantic UI Popup Size Variation can be used to display popups in different sizes. We can have popup variations ranging from mini to huge.

Semantic UI Popup Size Variation Classes:

mini: This class makes the popup of mini size.
tiny: This class makes the popup is of tiny size.
small: This class makes the popup is of a small size.
large: This class makes the popup is of a large size.
huge: This class makes the popup is of huge size.

Syntax: Add the desired size from the above classes and add to the popup as follows:

<i
  class="circular globe icon link"
  data-content=""
  data-variation="mini"
></i>

Example: In the following example, we have different sizes of popups for different icons.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <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> 
    <style> 
        .icon { 
            margin: 8px !important; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="ui container"> 
        <center> 
            <div class="ui header green"> 
                <h1> 
                    GeeksforGeeks 
                </h1> 
            </div> 
            <strong> 
                Semantic UI Popup Size Variation 
            </strong> 
        </center> 
  
        <div class="ui segment"> 
            <h1>Welcome to GeeksforGeeks</h1> 
            <p>Find the best programming tutorials here.</p> 
  
            <center> 
                <i class="circular globe icon link"
                    data-content= 
                       "The computer science portal for 
                        geeks. You will find lots of  
                        tutorials here related to studies, 
                        projects and exams." 
                    data-variation="mini"> 
                    Mini 
                </i> 
                <i class="circular globe icon link"
                    data-content= 
                       "The computer science portal for 
                        geeks. You will find lots of  
                        tutorials here related to studies, 
                        projects and exams." 
                    data-variation="tiny"> 
                    Tiny 
                </i> 
                <i class="circular globe icon link"
                    data-content= 
                       "The computer science portal for 
                        geeks. You will find lots of  
                        tutorials here related to studies, 
                        projects and exams." 
                    data-variation="small"> 
                    Small 
                </i> 
                <i class="circular globe icon link"
                    data-content= 
                       "The computer science portal for 
                        geeks. You will find lots of  
                        tutorials here related to studies, 
                        projects and exams." 
                    data-variation="large"> 
                    Large 
                </i> 
                <i class="circular globe icon link"
                    data-content= 
                       "The computer science portal for 
                        geeks. You will find lots of  
                        tutorials here related to studies, 
                        projects and exams." 
                    data-variation="huge"> 
                    Huge 
                </i> 
            </center> 
            <br /> 
        </div> 
    </div> 
    <script> 
        $('.icon').popup() 
    </script> 
</body> 
  
</html>