1

Estoy usando la librería https://github.com/vuetifyjs/vuetify en un proyecto que estoy realizando, pero al intentar añadirle un tooltip a un botón que es el activador de un menú, no funciona el tooltip. Me imagino que sea por los slots.

Este es un ejemplo del tooltip funcionando perfectamente.

<v-tooltip bottom>
    <v-btn
            slot="activator"
            color="secondary"
            dark
            small
            flat
    >
        Secundario  - {{ stheme }}
    </v-btn>
    <span>Color Secundario</span>
</v-tooltip>

Ahora esto es lo que que tengo en mi codigo actualmente:

<v-menu offset-y>
    <v-tooltip bottom>
        <v-btn
                slot="activator"
                color="secondary"
                dark
                small
                flat
        >
            Secundario  - {{ stheme }}
        </v-btn>
        <span>Color Secundario</span>
    </v-tooltip>

    <v-list>
        <v-list-tile
                v-for="(item, index) in themes"
                :key="index"
                @click="changeTheme(item, false)"
        >
            <v-list-tile-title>{{ item.name }}</v-list-tile-title>
        </v-list-tile>
    </v-list>
</v-menu>

Cuando no tenia el tooltip el codigo se veia de esta manera:

<v-menu offset-y dense>
    <v-btn
            slot="activator"
            color="secondary"
            dark
            small
            flat
    >
        Secundario - {{ stheme }}
    </v-btn>
    <v-list>
        <v-list-tile
                v-for="(item, index) in themes"
                :key="index"
                @click="changeTheme(item, false)"
        >
            <v-list-tile-title>{{ item.name }}</v-list-tile-title>
        </v-list-tile>
    </v-list>
</v-menu>

Este es un link de la documentación de vuetify donde pueden ver como se agrega un menú a un v-btn https://vuetifyjs.com/es-MX/components/menus

La idea que me hago es que antes del tooltip yo establecia el v-btn con el slot="activator" y como estaba dentro del elemento menu, este pasaba a ser el que activaba el menu al hacer click, pero al estar ahora dentro de un tooltip no sabe cual es el que debe desencadenar esta acción. Si le pongo al tooltip slot="activator" no funciona tampoco. Que podra hacer para que me funcione el tooltip y a la vez me muestre el menu al hacer click sobre el botón. No quisiera hacer un dialog. Que me recomendarian????

4
  • la consoloa aparece limpia? probaste poniendo el boton sin nada, a ver que pasa? digo, para andar eliminando problemas de a uno...
    – gbianchi
    el 22 oct. 2018 a las 14:53
  • la consola no tiene errores, y el boton no despliega el menu. el 22 oct. 2018 a las 14:53
  • pero el boton esta dentro del menu? algo no me cuadra...
    – gbianchi
    el 22 oct. 2018 a las 14:54
  • mira voy a editar la pregunta para que veas el codigo del boton dentro del menu y que funciona el 22 oct. 2018 a las 14:56

1 respuesta 1

1

Buscando un poco encontré en la documentación de vuejs: https://v2.vuejs.org/v2/guide/components-slots.html que podia usar la etiqueta template para solucionar mi problema:

El código seria este:

<v-menu offset-y>
    <template slot="activator">
        <v-tooltip bottom>
            <v-btn
                    slot="activator"
                    color="secondary"
                    dark
                    small
                    flat
            >
                Secundario  - {{ stheme }}
            </v-btn>
            <span>Color Secundario</span>
        </v-tooltip>
    </template>
    <v-list>
        <v-list-tile
                v-for="(item, index) in themes"
                :key="index"
                @click="changeTheme(item, false)"
        >
            <v-list-tile-title>{{ item.name }}</v-list-tile-title>
        </v-list-tile>
    </v-list>
</v-menu>

Sorry las molestias, lo dejo aqui por si a alguien le puede servir en un futuro.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.