https://github.com/filipelinhares/fooltips

💬 Tooltips with just CSS ~1kb
https://github.com/filipelinhares/fooltips

css tooltip-library tooltips

Last synced: 4 months ago
JSON representation

💬 Tooltips with just CSS ~1kb

• Host: GitHub
• URL: https://github.com/filipelinhares/fooltips
• Owner: filipelinhares
• License: mit
• Created: 2016-05-20T23:22:26.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2024-09-12T03:51:26.000Z (5 months ago)
• Last Synced: 2024-10-02T07:12:02.495Z (5 months ago)
• Topics: css, tooltip-library, tooltips
• Language: CSS
• Homepage: https://filipelinhares.github.io/fooltips
• Size: 263 KB
• Stars: 12
• Watchers: 3
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# fooltips [![npm version](https://img.shields.io/npm/v/fooltips.svg)](https://www.npmjs.com/package/fooltips) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/fooltips)

## Usage

```html

Simple text

```

## Attributes

**Base**

- `data-tooltip`

**Direction**

- `data-tooltip="top"`

- `data-tooltip="top-right"`

- `data-tooltip="top-left"`

- `data-tooltip="left"`

- `data-tooltip="right"`

- `data-tooltip="bottom-right"`

- `data-tooltip="bottom-left"`

- `data-tooltip="bottom"`

**Multiline**

- `data-tooltip-multiline`

**States**

- `data-is-tooltiped`

### Classes

**States**

- `is-tooltiped`

### Variables

```css

:root {

  --tooltip-multiline-width: 250px;

  --tooltip-background-color: rgba(0, 0, 0, .8);

  --tooltip-color: #fff;

  --tooltip-padding: 5px 8px;

  --tooltip-border-radius: 4px;

  --tooltip-font-size: 0.7rem;

  --tooltip-z-index: 10;

  --tooltip-content: aria-label;

}

```

## License

[MIT](LICENSE.md) © Filipe Linhares