I have code where I'm using <v-tooltip> in slot of <v-select>. When I try to click on tooltip icon which is in prepent-inner slot. click is also applying on <v-select> and dropdown menu is opening.

<v-select
        v-model="Settings.Configurations.ID"
        name="hierarchicalId"
        item-title="name"
        item-value="name"
        :items="businessRuleColumn"
        :items-props="{ attach: true }"
        clearable
        clear-icon="fal fa-times"
        persistent-clear
        variant="outlined"
        :label="$t('adminmon.id')"
        hide-details="auto"
        @update:model-value="getTableData"
        :error-messages="
          ValidationRules.invalidSelection(
            Settings.Configurations.ID,
            $t('adminmon.id'),
            'name',
            businessRuleColumn
          )
        "
      >
        <template #prepend-inner>
          <s-tooltip location="top">
            {{ $t('admin.widgets.edit_widget.hierarchical_id_tooltip') }}
          </s-tooltip>
        </template>
</v-select>

Here is the code for custom tooltip components.

s-tooltip.vue:

<template>
  <v-tooltip v-bind="$attrs" :location="$attrs.location || 'right'" v-model="showTooltip">
    <template #activator="{ props }">
      <span @click="toggleTooltip" v-bind="props">
        <slot name="content">
          <v-icon class="tooltip-icon" color="primary" size="small" @click="toggleTooltip" @click.stop.prevent> fas fa-info-circle </v-icon>
        </slot>
      </span>
    </template>
    <div class="tooltip-content" ref="tooltipContent">
      <slot />
      <v-btn v-if="isClicked" icon class="close-btn bg-transparent" size="xs-small" @click="closeTooltip">
        <v-icon color="grey">fas fa-times</v-icon>
      </v-btn>
    </div>
  </v-tooltip>
</template>

I want to stop propagating the click event to the parent and do not want to open the menu if I click on the tooltip Icon.