Mixins
===

#### Tooltips
For text-only tooltips use the `data-tooltip` attribute for showing and hiding small amounts of info. You'll need to import the mixin in your component's styles:

```scss
@import '../../styles/mixins/tooltips.scss';

.MyComponent {
  * { @include tooltips } // use tooltips on any children elements
  @include tooltips;      // set a tooltip directly on the element
}
```

Now you can set the tooltip text and positioning in your JSX:

```jsx
import Flex from '@ui/components/Flex';

<Flex justify="around">
  <span data-tooltip="Tooltip" data-tooltip-position="top">Top</span>
  <span data-tooltip="Tooltip" data-tooltip-position="right">Right</span>
  <span data-tooltip="Tooltip" data-tooltip-position="bottom">Bottom</span>
  <span data-tooltip="Tooltip" data-tooltip-position="left">Left</span>
</Flex>
```