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.
<!DOCTYPE html>
<html>
<head>
<title>SPECTRE Multiline Tooltip Class</title>
<link rel="stylesheet"
href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre.min.css">
<link rel="stylesheet"
href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre-exp.min.css">
<link rel="stylesheet"
href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre-icons.min.css">
</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:
Reference: https://picturepan2.github.io/spectre/components/tooltips.html#tooltips-multiline