ToolTips

General

ToolTips
Simple text popup box.

Show Code

import React from "react";
import ToolTips from "pocko-ui/Tooltips";
 
<div className="mt-4">
    <div style={{ width: "fit-content" }}>
        <ToolTips content="prompt text">
            <div className="link-primary">The tooltip will be shown when the mouse enters.</div>
        </ToolTips>
    </div>
 
    <hr />
 
    <div style={{ width: "fit-content" }}>
        <ToolTips content="prompt text" position="top">
            <div className="link-primary">The tooltip will be shown at the top when the mouse enters.</div>
        </ToolTips>
    </div>
</div>

Change Color

Show Code

import React from "react";
import ToolTips from "pocko-ui/Tooltips";
 
<div className="mt-4">
    <div style={{ width: "fit-content" }}>
      <ToolTips content="prompt text" color="red">
        <div className="link-primary">The red tooltip will be shown when the mouse enters.</div>
      </ToolTips>
    </div>
 
    <hr />
 
    <div style={{ width: "fit-content" }}>
      <ToolTips content="prompt text" color="#1E90FF" position="top">
        <div className="link-primary">The doderblue tooltip will be shown at the top when the mouse enters.</div>
      </ToolTips>
    </div>
</div>

API

ToolTips

import ToolTips from 'pocko-ui/ToolTips';
import 'pocko-ui/ToolTips/index.css'

Property	Type	Default	Description	Required
`delay`	number	300	The delay (in milliseconds) before the pop-up layer appears.	-
`color`	string	#000	The background color of the pop-up layer.	-
`children`	React.ReactNode	-	The content to be displayed inside the pop-up layer.	✔
`content`	string	-	The text or content to be shown when the pop-up layer is visible.	✔
`position`	"top" \| "bottom" \| 'right' \| 'left'	'bottom'	The position of the pop-up layer relative to the target element.	-

Installation