Toggle Tooltip plugin for Vueform
Plugin for Vueform to add a small speech bubble above the ToggleElement on hover.
- Install the plugin
npm install vueform-plugin-toggle-tooltip- Add the plugin in
vueform.config.js
// vueform.config.js
import ToggleTooltipPlugin from 'vueform-plugin-toggle-tooltip'
export default {
// ...
plugins: [
ToggleTooltipPlugin,
]
}<template>
<Vueform>
<ToggleElement
name="toggle"
tooltip-text-on="This tooltip will show when toggle is on"
tooltip-text-off="This tooltip will show when toggle is off"
/>
</Vueform>
</template>| Name | {Type} Default | Description |
|---|---|---|
| tooltipText | {string} undefined |
The text in the modal when toggle is On or Off (mutually exclusive with tooltipOnText and tooltipOffText). |
| tooltipOnText | {string} undefined |
The text in the modal when toggle is On. |
| tooltipOffText | {string} undefined |
The text in the modal when toggle is Off. |
Classes can be changed using the built-in Vueform class management with TooltipModal key, eg.:
<ToggleElement
...
:replace-classes="{
TooltipModal: {
container: {
'vf-toggle-tooltip' : 'my-overlay-class',
},
content: {
'vf-toggle-tooltip-content' : 'my-wrapper-class',
}
// ...
}
}"
/>You can customize the following CSS vars dedicated for this plugin:
*, :root, :before, :after {
/* Modal */
--vf-toggle-tooltip-offset: 2.6rem;
--vf-toggle-tooltip-max-width: 380px;
--vf-toggle-tooltip-width: max-content;
--vf-toggle-tooltip-shadow-blur: 10px;
--vf-toggle-tooltip-shadow-spread: 2px;
--vf-toggle-tooltip-shadow-color: #0000001a;
/* Content */
--vf-toggle-tooltip-content-py: 0.5rem;
--vf-toggle-tooltip-content-px: 0.5rem;
--vf-toggle-tooltip-content-bg: #FFFFFF;
--vf-toggle-tooltip-content-font-size: 0.875rem;
--vf-toggle-tooltip-content-line-height: 1.2;
--vf-toggle-tooltip-content-color: inherit;
}The plugin also uses the following Vueform default CSS vars:
*, :root, :before, :after {
--vf-toggle-width;
}