I am unable to override the .v-tour__target--highlighted. May I know the issue here.
<div class="icon-container" v-if="showIcon">
<v-img src="/test.png" @click="startTour" alt="Help Icon" class="tour-button" />
<v-btn icon @click="hideIcon" class="close-button">
<v-icon>mdi-close-circle</v-icon>
</v-btn>
</div>
<div v-if="showTour" class="tour-overlay"></div>
<script>
import Vue from 'vue';
import VueTour from 'vue-tour';
require('vue-tour/dist/vue-tour.css');
Vue.use(VueTour);
export default {
data() {
return {
showTour: false,
myCallbacks: {
onSkip: this.stopTour,
onStop: this.stopTour,
onFinish: this.stopTour,
onStop: this.stopTour
},
showIcon: true
};
},
props: {
tourSteps: {
type: Array,
default: () => []
},
tourName: {
type: String,
default: 'customTour'
},
},
methods: {
startTour() {
this.showTour = true;
this.$tours[this.tourName].start();
},
stopTour() {
console.log("Here")
this.showTour = false;
},
hideIcon() {
this.showIcon = false;
},
}
};
</script>
<style scoped>
.icon-container {
position: fixed;
bottom: 8%;
z-index: 1000;
}
.tour-button {
position: relative;
right: -133%;
width: 10%;
}
.close-button {
position: absolute;
top: -5%;
right: -43%;
z-index: 1001;
}
.help-icon {
width: 100px
}
.tour-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 999;
}
.v-tour__target--highlighted {
box-shadow: 0 0 0 99999px rgba(0, 0, 0, .4);
}
</style>