Open In App

Spectre Multiline Tooltips

Last Updated : 04 Feb, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

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

Spectre Multiline tooltips

 

Reference: https://picturepan2.github.io/spectre/components/tooltips.html#tooltips-multiline

 



Like Article
Suggest improvement
Share your thoughts in the comments