Vue Bootstrap – How to use double quotes in v-b-tooltip

March 3, 2023

I am using this vue bootstrap tooltip. https://bootstrap-vue.org/docs/directives/tooltip

Now, I have this tooltip:

<label>Encoding
<feather-icon
    icon="AlertCircleIcon"
    class="mr-50 my-icon"
    v-b-tooltip.hover.right="'The encoding used inside the feed. Leave Automatically if you are uncertain'"
/>
</label>

On this toolitp text, I want to add double quotes around this word Automatically

If I use double quotes Its not render. Can you tell me how can I use double quootes?

>Solution :

You can try assigning the sentence that needs double quotes in a variable and assign that to v-b-tooltip.

<template>
    <label>Encoding
        <feather-icon
        icon="AlertCircleIcon"
        class="mr-50 my-icon"
        v-b-tooltip.hover.right="tooltipText"/>
    </label>
</template>

<script>
export default {
data(){
    return{
        tooltipText:'The encoding used inside the feed. Leave "Automatically" if you are uncertain'
    }
}
}
</script>