<!--
  Copyright 2023 Comcast Cable Communications Management, LLC

  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

  http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.

  SPDX-License-Identifier: Apache-2.0
-->

import { Canvas, Story } from '@storybook/addon-docs';

# Tooltip

Component to provide hint information to other components like buttons and action items.

## Source

https://github.com/rdkcentral/Lightning-UI-Components/blob/develop/packages/@lightningjs/ui-components/src/components/Tooltip/Tooltip.js

## Usage

`Tooltip` can display a `title` and is added as a child to any component that needs hint text. It is positioned above the parent component using the property 'bottomMargin' and centered horizontally based on the parent's width:

```js
import { Tooltip } from '@lightningjs/ui-components';
import Button from '../Button';

class Example extends lng.Component {
  static _template() {
    return {
      Button: {
        type: Button,
        x: 200,
        y: 100,
        w: 410,
        title: '+',
        background: 'stroke',
        Tooltip: {
          type: Tooltip,
          title: 'Add to My List!',
          bottomMargin: 24
        }
      }
    };
  }
}
```

<Canvas>
  <Story id="utilities-tooltip--basic" />
</Canvas>

### Sizing

The size of the tooltip is based on the length of it's 'title'. If the 'title' exceeds 400px the text wraps, and the background resizes to accomodate.

### Focus

Tooltip is only visible on focus of the parent.

## API

### Properties

| name         | type   | default   | description                                                                                           |
| ------------ | ------ | --------- | ----------------------------------------------------------------------------------------------------- |
| delayVisible | number | undefined | the amount of time, in milliseconds, before the tooltip is displayed after being focused              |
| timeVisible  | number | undefined | the amount of time, in milliseconds, the tooltip is displayed before transitioning out of the display |
| title        | string | undefined | tool tip text goes here                                                                               |

### Style Properties

| name            | type             | description                                          |
| --------------- | ---------------- | ---------------------------------------------------- |
| backgroundColor | number           | background color of tooltip                          |
| marginBottom    | number           | space below tooltip                                  |
| paddingX        | number           | space on left and right sides of tooltip text        |
| paddingY        | number           | space above and below tooltip text                   |
| pointerW        | number           | width of point beneath rounded rectangle of tooltip  |
| pointerH        | number           | height of point beneath rounded rectangle of tooltip |
| radius          | number \| array  | radius of tooltip corners                            |
| textStyle       | string \| object | text styles used for Tooltip's text                  |
