Semantic-UI Popup Types
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 = "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" >w3wiki</ 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.
HTML
<!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" >w3wiki</ 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.
HTML
<!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" >w3wiki</ 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.
HTML
<!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" >w3wiki</ 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.
HTML
<!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" >w3wiki</ 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
Contact Us