0

I am using v-tooltip to show some content when the user hover the mouse on div. Its working in development without an issue.

However, when I build it for production and move to prod environment, custom css are not applying to my tooltip.

The version of v-tooltip I am using is ^2.0.0-rc.33

Following is my code.

<div class="comments" @mouseover="mouseOverTooltip()" v-tooltip="{
              content: a.note,
              placement: 'top',
              classes: ['o-tooltip'] }">
            <span class="title">{{a.note}}</span></div>

I am using following CSS

 .comments >>> .h-tooltip.vue-tooltip {
    box-sizing: border-box;
    font-size: 11px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.45;
    letter-spacing: normal;
    color: #3d3d3d;
    background-color: #fff;
    max-width: 100%;
    padding:8px 8px 5px 8px;
    border-radius: 4px;
    border: solid 2px #1cacac;
    box-shadow: 0 7px 8px 0 rgba(170, 170, 170, 0.2), 0 5px 22px 4px rgba(170, 170, 170, 0.14), 0 12px 17px 2px rgba(170, 170, 170, 0.12)
 }
Chathuranga Ranasinghe
  • 529
  • 1
  • 4
  • 21
  • Try to debug your code on production may be something is missing – Narendra Jadhav Oct 23 '19 at 07:02
  • try removing the `>>>`, if you want direct child `>`. – Dejan.S Oct 23 '19 at 07:11
  • @Dejan.S tried that still the same – Chathuranga Ranasinghe Oct 23 '19 at 07:27
  • Use the [developer tools](https://www.google.com/search?q=browser+developer+tools) (debugger) of your browser to determine the [specificity](https://www.google.com/search?q=css+specificity) of CSS that are applied to the tooltip and make sure that your CSS has higher specificity. – RoToRa Oct 23 '19 at 09:24
  • You can remove the `>`, having a class `.comments .h-tooltip.vue-tooltip` would be enough if you don't want to be specific to first child. As @RoToRa mention check in the devtools if any of your styles get overriden or just your styles are not applied at all. – Dejan.S Oct 23 '19 at 10:16

0 Answers0