비활성화된 버튼에 Vuetify 도구 설명 표시

비활성화된 버튼에 Vuetify 도구 설명 표시

나는 Vuetify로 비활성화된 버튼에 툴팁을 표시하는데 어려움을 겪고 있다.

버튼이 활성화되면 툴팁이 표시될 수 있도록 확인했는데, 예상대로 작동한다.나는 이 질문이 연관되어 있다고 생각하지만, 나는 이것이 a에 적용되는지 알 만큼 충분히 숙달되어 있지 않다.v-btn. 사용자 지정 클래스를 만들어 특정 클래스에 추가하려고 시도했다.v-btn원소 하지만 난 운이 없었다.

HTML 예제

<div id="app">
  <v-app id="inspire">
    <v-container fluid class="text-xs-center">
      <v-layout
        flex
        justify-space-between
        row
        wrap
      >
        <v-flex xs12>
          <v-btn @click="show = !show">toggle</v-btn>
        </v-flex>

        <v-flex xs12 class="mt-5">
          <v-tooltip v-model="show" top>
            <template v-slot:activator="{ on }">
              <v-btn disabled icon v-on="on">
                <v-icon color="grey lighten-1">shopping_cart</v-icon>
              </v-btn>
            </template>
            <span>Programmatic tooltip</span>
          </v-tooltip>
        </v-flex>
      </v-layout>
    </v-container>
  </v-app>
</div>

JavaScript 예제

new Vue({
  el: '#app',
  data () {
    return {
      show: false
    }
  }
})

https://codepen.io/anon/pen/ZNqpOW?editors=1010

나는 툴팁이 비활성화된 버튼 위를 맴돌 때 표시될 수 있을 것으로 예상한다.나는 왜 버튼이 고장 났는지 설명하기 위해 이것을 사용하고 싶다.

이것이 절대적으로 최선의 방법인지는 잘 모르겠지만, 나는 버튼에 툴팁을 포장을 해서 사용할 수 있었다.div태그:

코데펜

<v-tooltip v-model="show" top>
  <template v-slot:activator="{ on }">
    <div v-on="on">
      <v-btn disabled icon>
        <v-icon color="grey lighten-1">shopping_cart</v-icon>
      </v-btn>
    </div>
  </template>
  <span>Programmatic tooltip</span>
</v-tooltip>

vuetify 툴팁이 슬롯 구문까지 발전함에 따라, 적합한 솔루션은 이제 다음 솔루션이 아니다.

<v-tooltip bottom :disabled="valid">
    <template v-slot:activator="{ on }">
    <div v-on="on" class="d-inline-block">
        <v-btn color="primary" :disabled="!valid">Button</v-btn>
    </div>
    </template>
    <span>You must accept first</span>
</v-tooltip>

참조URL: https://stackoverflow.com/questions/56370021/display-vuetify-tooltip-on-disabled-button