adamdehaven/vue-custom-tooltip

A reusable tooltip component for Vue (and VuePress) projects.

vue-custom-tooltip's Issues

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '$isServer')

After loading the plugin I get this error:

vue-custom-tooltip.esm.js:325 
        
       Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '$isServer')
    at Object.installMyComponent [as install] (vue-custom-tooltip.esm.js:325:42)
    at Object.use (runtime-core.esm-bundler.js:4365:28)
    at setup (main.ts:33:8)
    at createInertiaApp.js:13:12

Plugin is loaded through:

import VueCustomTooltip, { TooltipOptions } from '@adamdehaven/vue-custom-tooltip'

createInertiaApp({
  resolve: name => resolvePageComponent(name, import.meta.glob('@/views/pages/**/*.vue'), name),
  setup({ el, app, props, plugin }) {
    createApp({ render: () => h(app, props) })
      .use(plugin)
      .use(VueCustomTooltip)
      .mount(el)
  },
})

The error comes from here:

// Declare install function executed by Vue.use()
var install = function installMyComponent(Vue, opt) {
  // Don't install if already installed, or SSR
  if (install.installed || Vue.prototype.$isServer) { return }
  install.installed = true;

"vue": "^3.2.41"
"@adamdehaven/vue-custom-tooltip": "^1.4.4",

[Feature Request] A prop to change the position of the tooltip

Hi, i'd just like to start off by saying thank you for this package! It's by far one of the best I've tried.

I think a useful feature would be to be able to change the position of the tooltip. By default it is at the top, but a prop to change the position would be useful.

Vue 3: [Vue warn]: Component is missing template or render function.

Initializing the component directly in the file leads to warning 'Component is missing template or render function.'

To Reproduce
Steps to reproduce the behavior:

1. Get vue 3 cli project
2. Install next version of package, e.g. 'yarn add @adamdehaven/vue-custom-tooltip@next'
3. Register component as described
4. Use component as described in <!-- With element(s) --> section
5. See error in console Component is missing template or render function.

Expected behavior
No warning, tooltip and its component are rendered.

Desktop:

• OS: Windows 10 (running in WSL 2 on Ubuntu 20.04)
• Browser: Chrome 92, Firefox 90
• Package Version: 2.0.4
• Environment:
  Vue: 3.0.11,
  @vue/cli: 4.5.13 with TS and Vue SFC

Additional context
Global component initialization works fine, only in-component one fails.

And thanks for maintaining this repo and updating it to Vue 3.

TypeError: Cannot read properties of undefined (reading '$isServer')

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:
I'm using Vite

//main.ts

const VueCustomTooltip = (await import('@adamdehaven/vue-custom-tooltip')) .default

 app.use(VueCustomTooltip, {
      name: 'VueTooltip',
      color: '#fff',
      background: '#039be5',
      borderRadius: 4,
      fontWeight: 500,
    })

under Vite.config.ts I've also added optimizeDeps.include the plugin

Expected behavior
The plugin should load

Screenshots

Desktop (please complete the following information):

• OS: [e.g. Windows 11]
• Browser Edge
• Package Version latest 1.4.4

Additional context
I'm not really sure what causes the error. I only can guess probably due to being being imported asynchronously?

[Feature Request] Adding styles to label

Is your feature request related to a problem? Please describe.
I wanted to add styles within the tooltip but it displays the html tags instead.

Describe the solution you'd like
Would it be possible to display styles inside the tooltip such as icon simple html will do (color of specific text, bold letter, etc..)

Describe anything you've already tried
I've tried adding tags to the label but it would also display the code tag.

Vue 2 or 3?

Is there any guidance on which version to use for Vue 2 and Vue 3?

[Bug Report] Custom class not applied (vue 3)

Describe the bug
class attribute is not added/merged when using version@next

To Reproduce
Steps to reproduce the behavior:

1. Install @next
2. Create a single component that imports the package
3. Try to apply a new class attribute; bound or otherwise, does not matter
4. Assert the extra classes are not added to the element

Expected behavior
A class is added to the rendered component.

My file Tooltip.vue

<template>
  <VueCustomTooltip :label="content" :multiline="true" class="my-class-that-is-not-applied">
    <slot />
  </VueCustomTooltip>
</template>

<script>
import VueCustomTooltip from '@adamdehaven/vue-custom-tooltip';

export default {
  components: {
    VueCustomTooltip,
  },
  props: {
    content: {
      type: String,
      required: true,
    },
  },
};

[Feature Request] Support for VuePress Next v2.0

Hello @adamdehaven Thank You so much for this great plugin, Can you please update this for v2.0 as I really need it in my docs.

[Feature Request] Allow HTML in label or `$ref` to show some other element as the tooltip

Is your feature request related to a problem? Please describe.
Only adding text in label is very restrictive.

Describe the solution you'd like
Give an option to add HTML to the label so as to add components in the tooltip. Also, allow an option to give the reference to some other element in DOM so that tooltips don't clutter the markdown.

Describe anything you've already tried
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.