fix(VStepper): allow tooltips in title slots

packages/vuetify/src/components/VStepper/VStepperItem.sass

@@ -41,6 +41,9 @@
     &--disabled
       pointer-events: none
 
+    &:not(.v-stepper-item--editable)
+      cursor: default
+
     .v-stepper--alt-labels &
       flex-direction: column
       justify-content: flex-start

packages/vuetify/src/components/VStepper/VStepperItem.tsx

@@ -137,18 +137,19 @@ export const VStepperItem = genericComponent<VStepperItemSlots>()({
             {
               'v-stepper-item--complete': hasCompleted.value,
               'v-stepper-item--disabled': props.disabled,
+              'v-stepper-item--editable': canEdit.value,
               'v-stepper-item--error': hasError.value,
             },
             group?.selectedClass.value,
           ]}
-          disabled={ !props.editable }
+          disabled={ props.disabled }
           type="button"
           v-ripple={[
             props.editable && props.ripple,
             null,
             null,
           ]}
-          onClick={ onClick }
+          onClick={ isClickable.value ? onClick : undefined }
         >
           { isClickable.value && genOverlays(true, 'v-stepper-item') }
 

packages/vuetify/src/components/VStepper/__tests__/VStepper.spec.browser.tsx

@@ -0,0 +1,80 @@
+// Components
+import { VStepper } from '..'
+import { VIcon } from '@/components/VIcon'
+
+// Directives
+import vTooltip from '@/directives/tooltip'
+
+// Utilities
+import { render, screen, userEvent } from '@test'
+import { defineComponent, shallowRef } from 'vue'
+
+const TooltipIcon = defineComponent({
+  directives: { vTooltip: vTooltip as any },
+
+  setup () {
+    return () => (
+      <VIcon
+        v-tooltip="'Title tooltip'"
+        data-testid="title-tooltip"
+        icon="$info"
+      />
+    )
+  },
+})
+
+describe('VStepper', () => {
+  it('should allow title tooltips without making the item editable', async () => {
+    const model = shallowRef(1)
+
+    render(() => (
+      <VStepper
+        v-model={ model.value }
+        hideActions
+        items={[
+          { title: 'Step 1', value: 1 },
+          { title: 'Step 2', value: 2 },
+        ]}
+      >
+        {{
+          title: ({ step }) => step === 1 ? (
+            <>
+              <span>Step 1</span>
+              <TooltipIcon />
+            </>
+          ) : <span>Step 2</span>,
+        }}
+      </VStepper>
+    ))
+
+    await userEvent.hover(screen.getByTestId('title-tooltip'))
+
+    await expect.poll(() => screen.queryByCSS('.v-tooltip .v-overlay__content')).toBeVisible()
+
+    const title = screen.getByText('Step 1').closest('button')!
+
+    expect(getComputedStyle(title).cursor).toBe('default')
+
+    await userEvent.click(screen.getByText('Step 2'))
+
+    expect(model.value).toBe(1)
+  })
+
+  it('should keep disabled items disabled', () => {
+    render(() => (
+      <VStepper
+        editable
+        hideActions
+        items={[
+          { title: 'Step 1', value: 1 },
+          { title: 'Disabled step', value: 2, props: { disabled: true } },
+        ]}
+      />
+    ))
+
+    const item = screen.getByText('Disabled step').closest('button')!
+
+    expect(item).toBeDisabled()
+    expect(getComputedStyle(item).pointerEvents).toBe('none')
+  })
+})

packages/vuetify/src/components/VStepperVertical/VStepperVerticalItem.sass

@@ -33,13 +33,18 @@
     &:after
       display: none
 
-    &.v-expansion-panel--disabled,
-    &:not(.v-stepper-vertical-item--editable)
+    &.v-expansion-panel--disabled
       .v-expansion-panel-title
         pointer-events: none
 
-        .v-expansion-panel-title__overlay
-          opacity: 0
+    &:not(.v-stepper-vertical-item--editable)
+      .v-expansion-panel-title
+        cursor: default
+
+    &.v-expansion-panel--disabled,
+    &:not(.v-stepper-vertical-item--editable)
+      .v-expansion-panel-title__overlay
+        opacity: 0
 
   .v-stepper-vertical-item__avatar.v-avatar
     background: tools.theme-color('surface-variant', var(--v-medium-emphasis-opacity))

packages/vuetify/src/components/VStepperVertical/VStepperVerticalItem.tsx

@@ -135,6 +135,7 @@ export const VStepperVerticalItem = genericComponent<VStepperVerticalItemSlots>(
             props.class,
           ]}
           readonly={ !props.editable }
+          hover={ props.hover && canEdit.value }
           style={ props.style }
           color=""
           hideActions={ false }

packages/vuetify/src/components/VStepperVertical/__tests__/VStepperVertical.spec.browser.tsx

@@ -0,0 +1,60 @@
+// Components
+import { VStepperVertical, VStepperVerticalItem } from '..'
+import { VIcon } from '@/components/VIcon'
+
+// Directives
+import vTooltip from '@/directives/tooltip'
+
+// Utilities
+import { render, screen, userEvent } from '@test'
+import { defineComponent, shallowRef } from 'vue'
+
+const TooltipIcon = defineComponent({
+  directives: { vTooltip: vTooltip as any },
+
+  setup () {
+    return () => (
+      <VIcon
+        v-tooltip="'Title tooltip'"
+        data-testid="title-tooltip"
+        icon="$info"
+      />
+    )
+  },
+})
+
+describe('VStepperVertical', () => {
+  it('should allow title tooltips without making the item editable', async () => {
+    const model = shallowRef(1)
+
+    render(() => (
+      <VStepperVertical v-model={ model.value }>
+        <VStepperVerticalItem value={ 1 }>
+          {{
+            title: () => (
+              <>
+                <span>Step 1</span>
+                <TooltipIcon />
+              </>
+            ),
+            default: () => 'Step content',
+          }}
+        </VStepperVerticalItem>
+        <VStepperVerticalItem value={ 2 } title="Step 2" />
+      </VStepperVertical>
+    ))
+
+    await userEvent.hover(screen.getByTestId('title-tooltip'))
+
+    await expect.poll(() => screen.queryByCSS('.v-tooltip .v-overlay__content')).toBeVisible()
+
+    const title = screen.getByText('Step 1').closest('button')!
+
+    expect(getComputedStyle(title).cursor).toBe('default')
+    expect(getComputedStyle(title.querySelector('.v-expansion-panel-title__overlay')!).opacity).toBe('0')
+
+    await userEvent.click(screen.getByText('Step 2'))
+
+    expect(model.value).toBe(1)
+  })
+})