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.

Semantic-UI Popup is used to show some extra information to the user. In this article, we will discuss Popup Variations in Semantic-UI.

Semantic-UI Popup Variations:

• Basic: This variation is used to create a basic popup.
• Width: This variation is used to set the width of the popup.
• Fluid: This variation takes the entire width of the offset container.
• Size: This variation is used to set the size of the popup.
• Flowing: This variation has no maximum width.
• Inverted: This variation has its color inverted.

Semantic-UI Popup Variations Classes:

• basic: This class is used to create a basic popup.
• wide: This class is used to create a wide popup.
• very wide: This class is used to create a very wide popup.
• fluid: This class is used to create an entire width popup.
• mini: This class is used to create a mini-size popup.
• tiny: This class is used to create a tiny size popup.
• small: This class is used to create small size popup.
• large: This class is used to create large size popup.
• flowing: This class is used to create a flowing popup.
• inverted: This class is used to create a color inverted popup.

Syntax:

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

Example 1: The following code demonstrates the Semantic-UI Popup Basic, Width, and Fluid Variations.

Output:

Example 2: The following code demonstrates the Semantic-UI Popup Size, Flowing, and Inverted Variations

Output:

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