Semantic-UI Popup Flowing Variation

Last Updated : 23 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.

Semantic UI Popup Flowing Variation sets the popup with no maximum width so it can flow its width along as the content.

Semantic UI Popup Flowing Variation Classes:

flowing: Adding this variation, the content takes place of the whole screen.

Syntax: Add the flowing class to data variation as follows:

<div class="ui flowing popup">
    ....
</div>

<i data-variation="flowing"></i>

Example: In the following example, we have an icon with the flowing option enabled, where the popup extends through the whole screen.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0" /> 
    <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
        rel="stylesheet" /> 
    <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: 16px; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="ui container"> 
        <center> 
            <div class="ui header green"> 
                <h1>GeeksforGeeks</h1> 
            </div> 
            <strong> 
                Semantic UI Popup Flowing Variation 
            </strong> 
        </center> 
  
        <div class="ui segment"> 
            <h1>Welcome to GeeksforGeeks</h1> 
            <p>Find the best programming tutorials here.</p> 
            <center> 
                <i class="circular huge 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="flowing" 
                    data-position="bottom center"></i> 
            </center> 
            <br /> 
        </div> 
    </div> 
    <script> 
        $('.icon').popup({}) 
    </script> 
</body> 
  
</html>