UNPKG

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
/** * 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;