Semantic-UI Popup Tooltip Type
Semantic UI is a modern framework used in developing seamless designs for web pages, It gives the user a lightweight experience with its components. It uses predefined CSS and jQuery to incorporate different frameworks. it makes web pages look amazing and responsive.
Semantic UI Popup is used to display additional information through popups to the user. It alerts and provides the user with necessary information. Popups can help to save space and only show information when the user interacts with the webpage.
Semantic-UI Popup Tooltip Type is used to specify the tooltip element that can appear without using JavaScript. The tooltip element uses :before and :after pseudo-classes.
Semantic-UI Popup Tooltip Type Used Attribute:
- data-tooltip: This attribute is used to display the tooltip popup box.
Syntax:
<div class="ui icon button" data-tooltip="" data-position=""> <i class="icon-name icon"></i> </div>
Example 1: In this example, we will describes the use of Semantic-UI Popup Tooltip Type.
HTML
<!DOCTYPE html><html> <head> <title> Semantic-UI Popup Tooltip Type </title> <link rel="stylesheet" href=</head> <body> <div class="ui container center aligned"> <h2 style="color:green"> GeeksforGeeks </h2> <h3>Semantic-UI Popup Tooltip Type</h3> <div class="ui icon button" data-tooltip="GeeksforGeeks Comments"> <i class="comment icon"></i> </div> <div class="ui button" data-tooltip="HTML Tutorial" data-position="top left"> HTML </div> <div class="ui button" data-tooltip="CSS Tutorial" data-position="top right"> CSS </div> <div class="ui button" data-tooltip="JavaScript Tutorial" data-position="bottom left"> JavaScript </div> <div class="ui button" data-tooltip="jQuery Tutorial" data-position="bottom right"> jQuery </div> <div class="ui button" data-tooltip="Bootstrap Tutorial" data-position="top center"> Bootstrap </div> <div class="ui button" data-tooltip="Angular.js Tutorial" data-position="bottom center"> Angular.js </div> <div class="ui button" data-tooltip="React.js Tutorial" data-position="left center"> React.js </div> <div class="ui button" data-tooltip="Node.js Tutorial" data-position="right center"> Node.js </div> </div></body> </html> |
Output:
Semantic-UI Popup Tooltip Type
Example 2: In this example, we will describe the use of Semantic-UI Popup Tooltip Type with inverted data variations.
HTML
<!DOCTYPE html><html> <head> <title> Semantic-UI Popup Tooltip Type </title> <link rel="stylesheet" href=</head> <body> <div class="ui container center aligned"> <h2 style="color:green"> GeeksforGeeks </h2> <h3>Semantic-UI Popup Tooltip Type</h3> <div class="ui icon button" data-inverted="" data-tooltip="GeeksforGeeks Comments"> <i class="comment icon"></i> </div> <div class="ui button" data-inverted="" data-tooltip="HTML Tutorial" data-position="top left"> HTML </div> <div class="ui button" data-inverted="" data-tooltip="CSS Tutorial" data-position="top right"> CSS </div> <div class="ui button" data-inverted="" data-tooltip="JavaScript Tutorial" data-position="bottom left"> JavaScript </div> <div class="ui button" data-inverted="" data-tooltip="jQuery Tutorial" data-position="bottom right"> jQuery </div> <div class="ui button" data-inverted="" data-tooltip="Bootstrap Tutorial" data-position="top center"> Bootstrap </div> <div class="ui button" data-inverted="" data-tooltip="Angular.js Tutorial" data-position="bottom center"> Angular.js </div> <div class="ui button" data-inverted="" data-tooltip="React.js Tutorial" data-position="left center"> React.js </div> <div class="ui button" data-inverted="" data-tooltip="Node.js Tutorial" data-position="right center"> Node.js </div> </div></body> </html> |
Output:
Semantic-UI Popup Tooltip Type
Reference: https://semantic-ui.com/modules/popup.html#tooltip
Please Login to comment...