Tooltip for the slider

[kerim371]

Hi!

I've seen some examples of using tooltips with buttons (here and here).
But I can't make them work with slider.

My attempt looks like this:

        with vuetify.VTooltip(bottom=True):
            with vuetify.Template(v_slot_activator='{ on, attrs }'):
                vuetify.VSlider(
                    v_model=("z_scale", DEFAULT_Z_SCALE),
                    v_bind='attrs',
                    v_on='on', 
                    min=1,
                    max=100,
                    step=1,
                    hide_details=True,
                    dense=True,
                    style="max-width: calc(15vw - 10px);",
                )
            html.Span("Rescale Z-axis")

I don't understand what attrs and on means though.

Vuetify 2.

[jourdain]

Just nest the slider in a html.Div(v_bind="attrs", v_on="on")

[kerim371]

I tried the following:

        with vuetify.VTooltip(bottom=True):
            with vuetify.Template(v_slot_activator='{ on, attrs }'):
                with html.Div(v_on='on', v_bind='attrs'):
                    vuetify.VSlider(
                        v_model=("z_scale", DEFAULT_Z_SCALE),
                        min=1,
                        max=100,
                        step=1,
                        hide_details=True,
                        dense=True,
                        style="max-width: calc(15vw - 10px);",
                    )
            html.Span("Rescale Z-axis")

It now shows the tooltip but the width of slider is too small

[jourdain]

Move the style you had on the slider to the div.

[kerim371]

Yes, i've tried that too but didn't helped:

        with vuetify.VTooltip(bottom=True):
            with vuetify.Template(v_slot_activator='{ on, attrs }'):
                with html.Div(v_on='on', v_bind='attrs', style="max-width: calc(15vw - 10px);"):
                    vuetify.VSlider(
                        v_model=("z_scale", DEFAULT_Z_SCALE),
                        min=1,
                        max=100,
                        step=1,
                        hide_details=True,
                        dense=True,
                        # style="max-width: calc(15vw - 10px);",
                    )
            html.Span("Rescale Z-axis")

Probably I need to set minimal width to the Div?

[jourdain]

Tthe dev-tool of your browser to figure out CSS is your friend.

[kerim371]

Thank you!
I tried to use browser's dev-tool but now I'm not yet experienced web developer.
I just played with styles and I've set div to occupy 100% width but with the same limitation of the maximal width:

        with vuetify.VTooltip(bottom=True):
            with vuetify.Template(v_slot_activator='{ on, attrs }'):
                with html.Div(v_on='on', v_bind='attrs', style="width: 100%; max-width: calc(15vw - 10px);"):
                    vuetify.VSlider(
                        v_model=("z_scale", DEFAULT_Z_SCALE),
                        min=1,
                        max=100,
                        step=1,
                        hide_details=True,
                        dense=True,
                        # style="max-width: calc(15vw - 10px);",
                    )
            html.Span("Rescale Z-axis")