Spectre Multiline Tooltips
Last Updated :
04 Feb, 2022
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.
The normal tooltip will try to display the data-tooltip content in a single line, so because of that tooltip can appear on different element. That’s why we need multiline tooltips.
Spectre Multiline tooltips Class: There is no predefined class for this you just need to add the \n string between any text for multiline tooltips.
Syntax:
<button class="btn tooltip"
data-tooltip=".... \n ...">
....
</button>
Example: Below example illustrate the Spectre Multiline tooltips. The multi line tooltip only works on Opera.
HTML
<!DOCTYPE html>
< html >
< head >
< title >SPECTRE Multiline Tooltip Class</ title >
< link rel = "stylesheet"
href =
< link rel = "stylesheet"
href =
< link rel = "stylesheet"
href =
</ head >
< body >
< center >
< h1 >GeeksforGeeks</ h1 >
< strong >SPECTRE Multiline Tooltip Class</ strong >
< br >< br >
< button class = "btn tooltip tooltip-left"
data-tooltip = "Left Tooltip \n Multiline" >
Left Tooltip
</ button >
< button class = "btn tooltip tooltip-top"
data-tooltip = "Top Tooltip \n Multiline" >
Top Tooltip
</ button >
< button class = "btn tooltip tooltip-bottom"
data-tooltip = "Bottom Tooltip \n Multiline" >
Bottom Tooltip
</ button >
< button class = "btn tooltip tooltip-right"
data-tooltip = "Right Tooltip \n Multiline" >
Right Tooltip
</ button >
</ center >
</ body >
</ html >
|
Output:
Spectre Multiline tooltips
Reference: https://picturepan2.github.io/spectre/components/tooltips.html#tooltips-multiline
Share your thoughts in the comments
Please Login to comment...