Created
January 14, 2025 04:17
-
-
Save Chambo015/488b1399d069ee50ca3a9719e71c262a to your computer and use it in GitHub Desktop.
[Fix] On a Button that opens a modal, Tooltip reappears when modal is closed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script setup lang="ts"> | |
| import { CircleXIcon, PencilIcon, Settings2Icon, TrashIcon } from 'lucide-vue-next'; | |
| defineProps<{ | |
| title: string | |
| id: number | string | |
| }>(); | |
| const showDeleteDialog = ref(false); | |
| // То что поможет скрыть тултип после закрытия модального окна | |
| const isTooltipAllowed = ref(false); | |
| </script> | |
| <template> | |
| <TooltipProvider> | |
| <div class="flex flex-1 items-center justify-between overflow-hidden"> | |
| <p class="grow-1 truncate"> | |
| {{ title }} | |
| </p> | |
| <Tooltip :delay-duration="0" disable-hoverable-content> | |
| <TooltipTrigger as-child @mouseenter="isTooltipAllowed = true"> | |
| <Button class="size-6 shrink-0 p-0 opacity-0 transition-opacity group-hover:opacity-100" size="icon" variant="ghost" @click="showDeleteDialog = true"> | |
| <CircleXIcon class="size-4 text-red-500" /> | |
| </Button> | |
| </TooltipTrigger> | |
| <TooltipContent v-if="isTooltipAllowed" side="left"> | |
| <p class="text-xs text-red-500"> | |
| {{ $t('action.delete') }} | |
| </p> | |
| </TooltipContent> | |
| </Tooltip> | |
| </div> | |
| </TooltipProvider> | |
| <AlertDialog v-model:open="showDeleteDialog" @update:open="isTooltipAllowed = false"> | |
| <AlertDialogContent> | |
| <AlertDialogHeader> | |
| <AlertDialogTitle class="line-clamp-3 break-all"> | |
| Вы уверены что хотите удалить <span>“{{ title }}”</span>? | |
| </AlertDialogTitle> | |
| <AlertDialogDescription> | |
| Пользователи не смогут выбрать эту тему | |
| </AlertDialogDescription> | |
| </AlertDialogHeader> | |
| <AlertDialogFooter> | |
| <AlertDialogCancel class="h-9 px-3 text-sm"> | |
| {{ $t('action.cancel') }} | |
| </AlertDialogCancel> | |
| <Button | |
| size="sm" | |
| variant="destructive" | |
| @click="showDeleteDialog = false" | |
| > | |
| {{ $t('action.delete') }} | |
| </Button> | |
| </AlertDialogFooter> | |
| </AlertDialogContent> | |
| </AlertDialog> | |
| </template> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment