Security News
Introducing the Socket Python SDK
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
floating-vue
Advanced tools
floating-vue is a Vue.js library that provides a set of components and utilities for creating floating elements such as tooltips, popovers, dropdowns, and more. It is designed to be highly customizable and easy to use, making it a popular choice for adding floating UI elements to Vue applications.
Tooltip
This feature allows you to add tooltips to any element. The code sample demonstrates how to use the v-tooltip directive to add a tooltip to a button.
<template>
<div>
<button v-tooltip="'This is a tooltip'">Hover me</button>
</div>
</template>
<script>
import { VTooltip } from 'floating-vue';
import 'floating-vue/dist/style.css';
export default {
directives: {
tooltip: VTooltip
}
};
</script>
Popover
This feature allows you to create popovers that can be attached to any element. The code sample shows how to use the v-popover directive to attach a popover to a button.
<template>
<div>
<button v-popover:myPopover>Click me</button>
<popover id="myPopover">
<p>This is a popover content</p>
</popover>
</div>
</template>
<script>
import { VPopover } from 'floating-vue';
import 'floating-vue/dist/style.css';
export default {
directives: {
popover: VPopover
}
};
</script>
Dropdown
This feature allows you to create dropdown menus. The code sample demonstrates how to use the v-dropdown directive to create a dropdown menu attached to a button.
<template>
<div>
<button v-dropdown:myDropdown>Open Dropdown</button>
<dropdown id="myDropdown">
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
</dropdown>
</div>
</template>
<script>
import { VDropdown } from 'floating-vue';
import 'floating-vue/dist/style.css';
export default {
directives: {
dropdown: VDropdown
}
};
</script>
v-tooltip is a Vue.js directive for creating tooltips, popovers, and dropdowns. It is similar to floating-vue in terms of functionality but focuses more on simplicity and ease of use. It may not offer as many customization options as floating-vue.
vue-popperjs is a Vue wrapper for popper.js, a library used to position tooltips and popovers. It provides a more low-level API compared to floating-vue, giving developers more control over the positioning and behavior of floating elements.
vue-js-popover is a lightweight Vue.js component for creating popovers. It is simpler and more lightweight compared to floating-vue, making it a good choice for projects that require basic popover functionality without the need for extensive customization.
Easy tooltips, dropdowns, menus... with Floating UI
LICENCE MIT - Created by Guillaume CHAU (@Akryum)
FAQs
Easy Vue tooltips, dropdowns, menus & popovers using floating-ui
The npm package floating-vue receives a total of 201,978 weekly downloads. As such, floating-vue popularity was classified as popular.
We found that floating-vue demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
Security News
Floating dependency ranges in npm can introduce instability and security risks into your project by allowing unverified or incompatible versions to be installed automatically, leading to unpredictable behavior and potential conflicts.
Security News
A new Rust RFC proposes "Trusted Publishing" for Crates.io, introducing short-lived access tokens via OIDC to improve security and reduce risks associated with long-lived API tokens.