CODEWITHSUNDEEP
vue.jsvuejs2bootstrap-vue
Beusebiu
Beusebiu

Reputation: 1513

[BootstrapVue warn]: popover - Unable to find target element in document

I am using popover from Bootstrap-Vue, and I get this error:

[BootstrapVue warn]: popover - Unable to find target element in document.

Everything work just fine, but I have a lot of warnings and I want to fix them.

Parent Component

<template>
    <popover />
    
    <label id="popover-target-EXAMPLE">
          <i class="far fa-question-circle"></i> Parish
    </label>
</template>

<script>
    import Popover from './Popover';
    export default {
        components:{
            Popover,
        }
    }
</script>

My popover Child Component

<template>
    <div>
        <b-popover target="popover-target-EXAMPLE" variant="primary" triggers="hover" placement="top">
            <p class="popover-style">TEXT</p>
        </b-popover>
        //here are multiple <b-popover>....
    </div>
<template>

Upvotes: 4

Views: 5291

Answers (2)

Beusebiu
Beusebiu

Reputation: 1513

After some time I found out the problem. In that Popover child I had multiple popovers, and some of them are not in parent component.

So to fix the warnings I removed all <b-popover> that don't have an ID in parent component.

Upvotes: 1

hamzae
hamzae

Reputation: 91

Try to put the popover component after the targeted element

Upvotes: 2

Related Questions