Spectre Multiline Tooltips
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 = "https://unpkg.com/spectre.css/dist/spectre.min.css" > < link rel = "stylesheet" href = "https://unpkg.com/spectre.css/dist/spectre-exp.min.css" > < link rel = "stylesheet" href = "https://unpkg.com/spectre.css/dist/spectre-icons.min.css" > </ head > < body > < center > < h1 >w3wiki</ 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