Spectre Tooltips are quite useful for showing the description of different elements in the webpage. Tooltip can be invoked on any element in a webpage. It provide context information labels that appear on hover and focus. Tooltips component is built entirely in CSS.
To create a tooltip you need to add the tooltip class and the data-tooltip attribute, which contains the tooltip content. And by using tooltip-right, tooltip-bottom or tooltip-left class you can define the position of a tooltip. By default, the tooltip appears above the element.
Spectre tooltips:
- Multiline tooltips: This is used to create a multilined tooltip the normal tooltip will try to display the data-tooltip content in a single line.
Spectre tooltips Class:
- tooltip: This class is used to create tooltip element, things should be wrap inside this class belonging element.
- tooltip-right: This class is used to set the tooltip pop side right.
- tooltip-bottom: This class is used to set the tooltip pop side bottom.
- tooltip-top: This class is used to set the tooltip pop side top.
- tooltip-left: This class is used to set the tooltip pop side left.
Syntax:
<button class="btn tooltip" data-tooltip="...">
...
</button>
Example: Below example illustrate the Spectre tooltips. In this example, we will create 4 buttons and each side of the tooltips will be used in that button.
HTML
<!DOCTYPE html>
< html >
< head >
< title >SPECTRE Tooltip Class</ title >
< link rel = "stylesheet"
href =
< link rel = "stylesheet"
href =
< link rel = "stylesheet"
href =
</ head >
< body >
< center >
< h1 >GeeksforGeeks</ h1 >
< strong >SPECTRE Tooltip Class</ strong >
< br >< br >
< button class = "btn tooltip tooltip-left"
data-tooltip = "Left Tooltip" >
Left Tooltip
</ button >
< button class = "btn tooltip tooltip-top"
data-tooltip = "Top Tooltip" >
Top Tooltip
</ button >
< button class = "btn tooltip tooltip-bottom"
data-tooltip = "Bottom Tooltip" >
Bottom Tooltip
</ button >
< button class = "btn tooltip tooltip-right"
data-tooltip = "Right Tooltip" >
Right Tooltip
</ button >
</ center >
</ body >
</ html >
|
Output:
Spectre tooltips
Reference: https://picturepan2.github.io/spectre/components/tooltips.html#tooltips
Last Updated :
30 Jan, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...