https://github.com/victor141516/float-my-vue
Float My Vue is a lightweight and versatile Vue.js library that simplifies the positioning and handling of floating elements such as tooltips, popovers and more.
https://github.com/victor141516/float-my-vue
absolute float floating floating-ui tooltip vue vue3
Last synced: about 2 months ago
JSON representation
Float My Vue is a lightweight and versatile Vue.js library that simplifies the positioning and handling of floating elements such as tooltips, popovers and more.
- Host: GitHub
- URL: https://github.com/victor141516/float-my-vue
- Owner: victor141516
- Created: 2023-05-04T21:53:29.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2023-05-05T00:41:01.000Z (about 2 years ago)
- Last Synced: 2025-03-03T08:16:59.658Z (3 months ago)
- Topics: absolute, float, floating, floating-ui, tooltip, vue, vue3
- Language: TypeScript
- Homepage: https://github.com/victor141516/float-my-vue
- Size: 153 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Float My Vue
Float My Vue is a lightweight and versatile Vue.js library that simplifies the positioning and handling of floating elements such as tooltips, popovers and more.
## [Demo here](https://stackblitz.com/edit/vue-jipvav?file=src/App.vue)
Video example
## Features
- Automatic positioning and repositioning of floating elements
- Fully customizable
- Easy integration with existing Vue projects
- Built-in accessibility features
- Slot support for custom content
- Responsive design
## Installation
Install the package using npm:
```bash
npm install float-my-vue
```
## Setup
Import `FloatMyVue` in the components where you would like to use it:
```js
import { FloatMyVue } from 'float-my-vue';
```
And import the styles in the main file of your project (or wherever you prefer while making sure that the styles are loaded before the component is used):
```js
import 'float-my-vue/style.css';
```
## Usage
### Basic Usage
By default you can use the component with some styled content:
```html
Open!
Content
```
Also you can use a light theme:
```html
Open!
Content
```
### Customization
You can change the position of the floating element:
```html
Open!
Content
```
You can change the size of the arrow:
```html
Open!
Content
```
You can adjust the position of the floating element:
```html
Open!
Content
```
You can control the open/close state externally:
```html
Open!
Content
```
### Slots
There are slots that allow you to customize the content:
```html
Open!
⬇️
This doesn't look good
```