search

Akryum / floating-vue

💬 Easy tooltips, popovers, dropdown, menus... for Vue
https://floating-vue.starpad.dev/
MIT License
3.26k stars 333 forks source link

Images not rendering in tooltip #1004

Closed Stanzilla closed 6 months ago

Stanzilla commented 7 months ago 
<script lang="ts">
methods: {
    rfiTooltip() {
      return "<img width='300px' src='../../assets/ready-for-install-example.png' />"; // TODO: This image does not show up
    },
  },
</script>

<template>
<span
        v-tooltip="{
          content: rfiTooltip,
          html: true,
          strategy: 'fixed',
          theme: 'info-tooltip',
        }"
        class="i-mdi-help mt-[2px]"
        >help</span
      >
</template>

gives me Code-2023-12-16-06 24 04

I also tried 

v-tooltip="{
          content: "<img width='300px' src='../../assets/ready-for-install-example.png' />",
          html: true,
          strategy: 'fixed',
          theme: 'info-tooltip',
        }"

but that does the same thing. I have verified that the path is correct because the app errors when it's not there.

Stanzilla commented 7 months ago

After a lot of trial and error, figured out that this works:

v-tooltip="{
          content:
            '<img width=&quot;300px=&quot; src=&quot;src/assets/ready-for-install-example.png&quot; />',
          html: true,
          strategy: 'fixed',
          theme: 'info-tooltip',
        }"

For some reason you have to use single quotes on the outside AND escape double quotes on the inside, if you don't escape them you end up with this error: https://github.com/vuejs/eslint-plugin-vue/issues/2304 which is even more confusing.