Tooltip#

import { component, render } from 'sigx';
import { Tooltip, Button } from '@sigx/daisyui';

const Demo = component(() => {
    return () => (
        <Tooltip tip="hello">
            <Button>Hover me</Button>
        </Tooltip>
    );
});

render(<Demo />, "#sandbox");

import { component, render } from 'sigx';
import { Tooltip, Button } from '@sigx/daisyui';

const Demo = component(() => {
    return () => (
        <Tooltip tip="I am always visible" open>
            <Button>Force open</Button>
        </Tooltip>
    );
});

render(<Demo />, "#sandbox");

import { component, render } from 'sigx';
import { Tooltip, Button, Row } from '@sigx/daisyui';

const Demo = component(() => {
    return () => (
        <Row gap="4" class="p-16 flex-wrap justify-center">
            <Tooltip tip="top" position="top">
                <Button>Top</Button>
            </Tooltip>
            <Tooltip tip="bottom" position="bottom">
                <Button>Bottom</Button>
            </Tooltip>
            <Tooltip tip="left" position="left">
                <Button>Left</Button>
            </Tooltip>
            <Tooltip tip="right" position="right">
                <Button>Right</Button>
            </Tooltip>
        </Row>
    );
});

render(<Demo />, "#sandbox");

import { component, render } from 'sigx';
import { Tooltip, Button, Row } from '@sigx/daisyui';

const Demo = component(() => {
    return () => (
        <Row gap="2" class="p-8 flex-wrap justify-center">
            <Tooltip tip="neutral" color="neutral" open>
                <Button>neutral</Button>
            </Tooltip>
            <Tooltip tip="primary" color="primary" open>
                <Button variant="primary">primary</Button>
            </Tooltip>
            <Tooltip tip="secondary" color="secondary" open>
                <Button variant="secondary">secondary</Button>
            </Tooltip>
            <Tooltip tip="accent" color="accent" open>
                <Button variant="accent">accent</Button>
            </Tooltip>
            <Tooltip tip="info" color="info" open>
                <Button variant="info">info</Button>
            </Tooltip>
            <Tooltip tip="success" color="success" open>
                <Button variant="success">success</Button>
            </Tooltip>
            <Tooltip tip="warning" color="warning" open>
                <Button variant="warning">warning</Button>
            </Tooltip>
            <Tooltip tip="error" color="error" open>
                <Button variant="error">error</Button>
            </Tooltip>
        </Row>
    );
});

render(<Demo />, "#sandbox");

import { component, render } from 'sigx';
import { Tooltip, Button, Badge, Flex, Text } from '@sigx/daisyui';

const Demo = component(() => {
    return () => (
        <Tooltip open>
            <Button>Hover for details</Button>
            <Tooltip.Content class="bg-base-200 text-base-content p-4 rounded-box shadow-lg">
                <Flex direction="column" gap="2">
                    <Text weight="bold">Custom Tooltip</Text>
                    <Text size="sm">This tooltip has rich content</Text>
                    <Badge variant="success" size="sm">Active</Badge>
                </Flex>
            </Tooltip.Content>
        </Tooltip>
    );
});

render(<Demo />, "#sandbox");

import { component, render } from 'sigx';
import { Tooltip, Button } from '@sigx/daisyui';

const Demo = component(() => {
    return () => (
        <Tooltip tip="Only visible on large screens" class="lg:tooltip-open" position="right">
            <Button>Responsive tooltip</Button>
        </Tooltip>
    );
});

render(<Demo />, "#sandbox");