Tooltip

# Introduction

The Tooltip component is used to display additional information when a user hovers over an element. It is a small overlay that appears on top/right/bottom/left of the content when the user hovers over the element.

# Usage

To display a tooltip, simply wrap your content in a zinq:tooltip tag. The text attribute is used to specify the text that will be displayed in the tooltip. The content that will trigger the tooltip should be placed inside the zinq:tooltip tag.

<zinq:tooltip text="Tooltip text">
    <zinq:button>Hover me</zinq:button>
</zinq:tooltip>

# Position

You can specify the position of the tooltip by using the position attribute. The possible values are top , right , bottom , and left . The default value is top .

<div class="flex flex-wrap space-x-3">
    <zinq:tooltip text="Top tooltip" position="top">
        <zinq:button>Top</zinq:button>
    </zinq:tooltip>
    <zinq:tooltip text="Right tooltip" position="right">
        <zinq:button>Right</zinq:button>
    </zinq:tooltip>
    <zinq:tooltip text="Bottom tooltip" position="bottom">
        <zinq:button>Bottom</zinq:button>
    </zinq:tooltip>
    <zinq:tooltip text="Left tooltip" position="left">
        <zinq:button>Left</zinq:button>
    </zinq:tooltip>
</div>