Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to make your website look more amazing. It uses a class to add CSS to the elements.
A popup displays extra facts about the element to the user when he/she hovers over it. Semantic UI provides us with a styled popup. Let’s have a look at various popup types.
Semantic UI Popup Types:
- Standard Popup: A Standard Semantic UI-styled popup. The popup data is stored in the data-content attribute.
- Titled: Semantic UI provides us with the option of specifying a title to the popup. The popup title data is stored in the data-title attribute.
- HTML: A popup can be styled using the HTML and various classes provided by Semantic UI. The HTML-styled popup is stored in the data-html attribute.
- Pre-Existing: We pre-define a popup and use it on further defined elements.
- Tooltip: We can display a popup independent of JavaScript, using the data-tooltip attribute.
Syntax:
<div class="ui" data-content="..." data-title="..."
data-html="..." data-tooltip="...">
...
</div>
Note: Use the above syntax according to the need by using a combination of the above-mentioned classes. Refer to the examples below for a better understanding of the classes.
Example 1: In the below example, we have created a standard popup.
HTML
<!DOCTYPE html>
< html >
< head >
< title >Semantic UI Popup Types</ title >
< link href =
rel = "stylesheet" />
< script src =
integrity =
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin = "anonymous" >
</ script >
< script src =
</ script >
</ head >
< body >
< div class = "ui container" >
< h2 class = "ui green header" >GeeksforGeeks</ h2 >
< h4 >Semantic UI Popup Types</ h4 >
< hr >
< br />
< div class = "ui button" data-content = "A Standard Popup" >
Hover Over me to display a popup
</ div >
</ div >
< script >
$('.button').popup()
</ script >
</ body >
</ html >
|
Output:
Standard Popup
Example 2: In the below example, we have created a titled popup.
HTML
<!DOCTYPE html>
< html >
< head >
< title >Semantic UI Popup Types</ title >
< link href =
rel = "stylesheet" />
< script src =
integrity =
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin = "anonymous" >
</ script >
< script src =
</ script >
</ head >
< body >
< div class = "ui container" >
< h2 class = "ui green header" >GeeksforGeeks</ h2 >
< h4 >Semantic UI Popup Types</ h4 >
< hr >
< br />
< div class = "ui button" data-title = "Title"
data-content = "A Titled Popup" >
Hover Over me to display a popup
</ div >
</ div >
< script >
$('.button').popup()
</ script >
</ body >
</ html >
|
Output:
Titled Popup
Example 3: In the below example, we have created a styled HTML popup.
HTML
<!DOCTYPE html>
< html >
< head >
< title >Semantic UI Popup Types</ title >
< link href =
rel = "stylesheet" />
< script src =
integrity =
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin = "anonymous" >
</ script >
< script src =
</ script >
</ head >
< body >
< div class = "ui container" >
< h2 class = "ui green header" >GeeksforGeeks</ h2 >
< h4 >Semantic UI Popup Types</ h4 >
< hr >
< br />
< div class = "ui button" data-html=
"<h3 class = 'ui header green' >HTML</ h3 >
< p >A HTML popup</ p >
"
data-variation="mini">
Hover Over me to display a popup
</ div >
</ div >
< script >
$('.button').popup()
</ script >
</ body >
</ html >
|
Output:
HTML Popup
Example 4: In the below example, we have created a pre-existing popup.
HTML
<!DOCTYPE html>
< html >
< head >
< title >Semantic UI Popup Types</ title >
< link href =
rel = "stylesheet" />
< script src =
integrity =
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin = "anonymous" >
</ script >
< script src =
</ script >
</ head >
< body >
< div class = "ui container" >
< h2 class = "ui green header" >GeeksforGeeks</ h2 >
< h4 >Semantic UI Popup Types</ h4 >
< hr >
< br />
< div class = "ui button" data-position = "bottom right" >
Hover Over me to display a popup
</ div >
< div class = "ui popup" >
< h3 class = 'ui header green' >Pre-Existing</ h3 >
< p >A Pre-existing Popup</ p >
</ div >
</ div >
< script >
$('.button').popup()
</ script >
</ body >
</ html >
|
Output:
Pre-Existing Popup
Example 5: In the below example, we have created a tooltip popup.
HTML
<!DOCTYPE html>
< html >
< head >
< title >Semantic UI Popup Types</ title >
< link href =
rel = "stylesheet" />
< script src =
integrity =
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin = "anonymous" >
</ script >
< script src =
</ script >
</ head >
< body >
< div class = "ui container" >
< h2 class = "ui green header" >GeeksforGeeks</ h2 >
< h4 >Semantic UI Popup Types</ h4 >
< hr >
< br />
< div class = "ui button" data-tooltip = "I am a tooltip popup"
data-inverted = "" data-position = "bottom left" >
Hover Over me to display a popup
</ div >
</ div >
</ body >
</ html >
|
Output:
Tooltip popup
Reference: https://semantic-ui.com/modules/popup.html
Last Updated :
13 Jun, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...