[Vuejs]-Show tooltip in Autocomplete dropdown items using Vuetify

by

-1👍

Solution:

The v-input--selection-controls__ripple Div overlaps the input box of the selection control; hence binds to the click instead.
To fix this I applied a simple CSS Hack. Conceptually position it above by using position and z-index:-10 for the div.
that is illustrated with edits marked below as /* <--------------- */

<div class="v-input__slot">
    <div class="v-input--selection-controls__input">
        <input aria-checked="false" role="checkbox" type="checkbox" value="1" style="
        position: relative; /* <--------------- */
        ">
        <div class="v-input--selection-controls__ripple" style="
        position: absolute; z-index: -10; /* <--------------- */        
        "></div>
        <i aria-hidden="true" class="v-icon material-icons theme--light">check_box_outline_blank</i>
    </div>
</div>
👤ArjunDhar

Leave a comment