Semantic-UI Popup Width Variation

Last Updated : 16 Mar, 2022

Semantic UI is the open-source framework that used CSS and jQuery to make our websites look beautiful and responsive. It has predefined classes like bootstrap for use to make our website more interactive. It has some pre-built semantic components and we can use these components to create a responsive website. In this article, we will discuss Popup Width Variation in Semantic-UI.

Semantic-UI Popup Width Variation is used to set the width of the container to display the information. We can set the width of the container using data-variation attribute. The Popup is used to show some extra information to the user.

Semantic-UI Popup Width Variation Classes:

wide: It is used to create a wide container to display the information.
very wide: It is used to create a very wide size container to display the information.

Syntax:

<i class="add icon" 
    data-content="Content" 
    data-variation="Class">
</i>

Example 1: The following code demonstrates the Semantic-UI Popup Width Variation using a wide class.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
  
    <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> 
  
</head> 
  
<body> 
    <h2 class="ui header green"> 
        GeeksforGeeks 
    </h2> 
    <h3> 
        Semantic-UI Popup Width Variation 
    </h3>  
    <br> 
    <i class="circular desktop icon" 
       data-content="A Computer Science portal for geeks.  
      It contains well written, well thought  
      and well explained computer science and  
      programming articles" 
       data-variation="wide"> 
    </i> 
    <script> 
        $('.icon').popup({}); 
    </script> 
</body> 
</html>

Output:

Semantic-UI Popup Width Variation

Example 2: The following code demonstrates the Semantic-UI Popup Width Variation using a very wide class.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <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> 
</head> 
  
<body> 
    <h2 class="ui header green"> 
        GeeksforGeeks 
    </h2> 
    <h3> 
        Semantic-UI Popup Width Variation 
    </h3>  
    <br> 
    <i class="circular add icon" 
       data-content="A Computer Science portal for geeks.  
       It contains well written, well thought  
       and well explained computer science and  
       programming articles"  
       data-variation="very wide"> 
    </i> 
    <script> 
        $('.icon').popup({}); 
    </script> 
</body> 
</html>