gadgets
Version:
Reusable React UI widgets - This is my widget library. There are many like it, but this one is mine...
74 lines (73 loc) • 2.64 kB
TypeScript
/**
* A tooltip is a text popup element associated with a control. It
* is used to give help or feedback to the user on the use of that
* control. This `Tooltip` component is embedded within another
* widget. The *parent* widget contains an id. The `Tooltip` is
* given the same id as the *parent* prop. When the *mouseenter* event
* is invoked on the parent component the tooltip is displayed. When
* the *mouseleave* event occurs the tooltip is hidden.
*
* Note that the tooltip is set by position *absolute*. The container
* that will hold the `Tooltip` component must be position *relative*
* or the component will be placed as absolute from the beginning of the
* document.
*
* #### Examples:
*
* ```javascript
* import {Tooltip} from 'gadgets';
*
* <div id="uniqueId">
* ...
* <Tooltip location={Location.topRight} parent="uniqueId">tooltip string</Tooltip>
* </div>
* ```
*
* #### Events
* None
*
* #### Styles
* - `ui-tooltip` - Applied to the top level `<div>` in the control
* - `ui-tooltip-content` - Applied to the container around the content
* (text) of the tooltip.
*
* #### Properties
* - `color="white" {string}` - the color of the tooltip text
* - `backgroundColor="gray" {string}` - the color of the containing
* box
* - `location=Location.middleRight {Location}` - when the tooltip is
* displayed this is the side of the parent control where it will be
* displayed.
* - `parent="" {string}` - The id of the component where this tooltip
* will be applied.
*
* @module Tooltip
*/
/// <reference types="react" />
import { BaseComponent, BaseProps, BaseState } from "../shared";
export interface TooltipProps extends BaseProps {
parent?: any;
}
export interface TooltipState extends BaseState {
show?: boolean;
}
export declare class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
static readonly defaultProps: TooltipProps;
constructor(props: TooltipProps);
private handleMouseEnter;
private handleMouseLeave;
componentDidMount(): void;
componentWillUnmount(): void;
render(): JSX.Element;
}
/**
* Creates a tooltip object for use within a control. It will check the given
* props for a tooltip string. If it has one, it will create the object and
* return it. If it doesn't have it, then NULL is returned.
* @param props {any} and object representing the props used to generate the
* tooltip.
* @return {Tooltip} a new Tooltip reference if there is a given tooltip string
* otherwise null is returned.
*/
export declare function tooltip(id: string, props: any): JSX.Element;
export default Tooltip;