@telenko/portal-tooltip
v0.0.7
Published
Easy component, which allows to bind React contents as tooltip to a native DOM element
Downloads
12
Readme
Simple component for attaching React contents as tooltip to native DOM elements
<html>
...
<body>
<div id='root'></div>
<div id='hover-container'>You can hover here</div>
</body>
</html> import { useMemo } from 'react';
import PortalTooltip from '@telenko/portal-tooltip';
const Example: React.FC = () => {
const container = useMemo(() => document.getElementById('hover-container'), []);
return <PortalTooltip container={container}>
<div>I'm a contents inside a tooltip :) You can use any React components here.</div>
</PortalTooltip>
};Positioning
//left to cursor
<PortalTooltip container={container} direction='left'>...</PortalTooltip>
//right to cursor
<PortalTooltip container={container} direction='right'>...</PortalTooltip>
//top to cursor
<PortalTooltip container={container} direction='top'>...</PortalTooltip>
//bottom to cursor
<PortalTooltip container={container} direction='bottom'>...</PortalTooltip>
//manual position
<PortalTooltip container={container} dx={20} dy={-200}>...</PortalTooltip>
//mixed position
<PortalTooltip container={container} direction='right' dx={20}>...</PortalTooltip>