https://github.com/gVguy/vue-follow-tooltip

Tiny tooltip directive for vue 3
https://github.com/gVguy/vue-follow-tooltip

Last synced: about 2 months ago
JSON representation

Tiny tooltip directive for vue 3

• Host: GitHub
• URL: https://github.com/gVguy/vue-follow-tooltip
• Owner: gVguy
• Created: 2021-10-16T09:28:16.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2021-10-17T10:10:17.000Z (over 2 years ago)
• Last Synced: 2024-02-23T04:43:50.980Z (3 months ago)
• Language: JavaScript
• Size: 1.66 MB
• Stars: 4
• Watchers: 1
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Lists

• awesome-vue - vue-follow-tooltip - Tiny tooltip directive for Vue 3. (Components & Libraries / UI Components)
• awesome-vue - vue-follow-tooltip - Tiny tooltip directive for Vue 3. (Components & Libraries / UI Components)
• awesome-stars - gVguy/vue-follow-tooltip - Tiny tooltip directive for vue 3 (JavaScript)
• awesome-vue - vue-follow-tooltip - Tiny tooltip directive for Vue 3. (Components & Libraries / UI Components)

README

        
# vue-follow-tooltip

Tiny tooltip directive for Vue 3

Lets you create tooltips that follow cursor



    🚀  Live demo  🚀





    Codepen





    



## Why

### Simple

No dependencies. No under-the-hood libraries. Just a couple of Vanilla JS objects

### Customizable

There are a few things you can customize with options

No need to override default styles, because there aren't any. Just add your CSS as usual

> More about [styles](#styles)

> More about [options](#options)

## Installation

### NPM

```

npm i vue-follow-tooltip

```

```javascript

import Tooltip from 'vue-follow-tooltip'

```

### CDN

```xml

```

## Usage

```javascript

// install it with use()

app.use(Tooltip)

// OR register the directive manually

app.directive('tooltip', Tooltip)

```

```xml

DON'T PUSH

```

## Options

You can pass options like this:

```javascript

app.use(Tooltip, {

   delay: 500,

   center: true,

   offsetX: 0,

   offsetY: 20

})

```

The values in the example are the default values

Property names are pretty self-explanatory

## Styles

The tooltip gets a class `.tooltip`

Use it to apply styles to it like this:

```css

.tooltip {

   background: rgba(1, 1, 1, 0.7);

   padding: 10px;

   border-radius: 3px;

   color: #fbfbfb;

   font-family: sans-serif;

   transition: opacity 0.3s;

}

```

### Styling guidelines

-  There are no default styles, however, if you specify `top`, `left`, `opacity` & `position` they will have no effect

-  Dont use `transition: all ..`, it will mess with how the tooltip follows the cursor

## License

MIT