can't change the video link input position in vue2editor

Question

I am using vue2editor following the official documentation of vue2editor. https://github.com/davidroyer/vue2-editor

This is my code:

<template>
  <div id="app">
    <vue-editor v-model="content" :editor-options="editorSettings"></vue-editor>
  </div>
</template>

<script>
import { VueEditor, Quill } from 'vue2-editor'

export default {
  components: {
    VueEditor,
  },

  data() {
    return {
      content: '',
    }
  },
  editorSettings: {
    bounds: 'self',
  },
}
</script>

Pressing on the video icon the video input tooltip is generating with some negative margin on the left. Saw some solution that said to use the 'bound' property and setting that to the element or self. The guidelines available for doing that are for JS. How can I implement that in my component script?

Answer 1

Please try this code

<style scoped>
::v-deep .ql-tooltip {
  left: unset !important;
}
</style>

As recommended in this answer