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.
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Popup Types</title>
<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"
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</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:
Example 2: In the below example, we have created a titled popup.
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Popup Types</title>
<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"
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</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:
Example 3: In the below example, we have created a styled HTML popup.
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Popup Types</title>
<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"
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</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:
Example 4: In the below example, we have created a pre-existing popup.
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Popup Types</title>
<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"
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</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:
Example 5: In the below example, we have created a tooltip popup.
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Popup Types</title>
<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"
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</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:
Reference: https://semantic-ui.com/modules/popup.html