Semantic-UI Popup Titled Type
Semantic UI is an open-source UI framework that is built with CSS preprocessor less and jQuery. It comes with pre-styled and functional elements and modules that help in building great websites faster. It can also be used with other CSS frameworks like Bootstrap.
A popup module is used to show additional information to the user. In this article, we will be seeing the popup titled type. The title of a popup can be specified using the data-title attribute of the popup module.
Semantic-UI Popup Titled Type Attribute:
- data-title: This attribute can specify popup content with a title.
Syntax:
<div class="ui ..." data-title="..." data-content="..."> ... </div>
Example 1: The example below illustrates the use of the data-title attribute of the popup module to set the title a popup.
HTML
<!DOCTYPE html> < html > < head > < title >Semantic-UI Popup Titled Type</ title > < link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> < 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 > < style > .ui.container { text-align: center; } h3 { margin-top: 0px; } .ui.button { margin-top: 30px !important; } </ style > </ head > < body > < div class = "ui container" > < div > < h1 style = "color:green" >w3wiki</ h1 > < h3 >Semantic UI - Progress Titled Type</ h3 > </ div > < div class = "ui button" data-title = "w3wiki" data-content= "w3wiki is a computer science portal for Beginner. You can read article on various computer science subjects like Data Structures, Algorithms, DBMS , etc. You can also enroll in courses to get video lectures on various subjects."> Hover to see the popup with title. </ div > </ div > < script > $(".ui.button").popup(); </ script > </ body > </ html > |
Output:
Example 2: The example below shows the titled type popup with different width variations.
HTML
<!DOCTYPE html> < html > < head > < title >Semantic-UI Popup Titled Type</ title > < link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> < 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 > < style > .ui.container { text-align: center; } h3 { margin-top: 0px; } .ui.button { margin-top: 30px !important; } </ style > </ head > < body > < div class = "ui container" > < div > < h1 style = "color:green" >w3wiki</ h1 > < h3 > Semantic UI Progress Titled Type with Width Variation </ h3 > </ div > < div class = "ui grid" > < div class = "sixteen wide column" > < div class = "ui button" data-title = "w3wiki" data-content= "w3wiki is a computer science portal for Beginner. You can read article on various computer science subjects like Data Structures, Algorithms, DBMS , etc. You can also enroll in courses to get video lectures on various subjects."> Hover to see the popup with title. </ div > </ div > < div class = "sixteen wide column" > < div class = "ui button" data-title = "w3wiki" data-content= "w3wiki is a computer science portal for Beginner. You can read article on various computer science subjects like Data Structures, Algorithms, DBMS , etc. You can also enroll in courses to get video lectures on various subjects." data-variation = "wide" > Hover to see the wide popup with title. </ div > </ div > < div class = "sixteen wide column" > < div class = "ui button" data-title = "w3wiki" data-content= "w3wiki is a computer science portal for Beginner. You can read article on various computer science subjects like Data Structures, Algorithms, DBMS , etc. You can also enroll in courses to get video lectures on various subjects." data-variation = "very wide" > Hover to see the very wide popup with title. </ div > </ div > </ div > </ div > < script > $(".ui.button").popup(); </ script > </ body > </ html > |
Output:
Reference Link: https://semantic-ui.com/modules/popup.html#titled