Dialog with Tooltip
Dialog 내부 도움말 Tooltip이 dialog layer 위에서 읽히도록 floating surface를 조합합니다.
승인 요청
출고 보류를 해제하기 전에 SLA 기준과 담당 팀 확인 상태를 함께 검토해요.
상태 기준
SLA 4시간을 초과하고 고객 알림이 끝난 항목만 승인 후보가 돼요.
- 요청자
- 운영팀
- 대상
- 출고 보류 12건
- 위험도
- 중간
<script lang="ts">
import * as Dialog from '@odbd/svelte/dialog'
import * as Tooltip from '@odbd/svelte/tooltip'
</script>
<div class="dialog-tooltip">
<Dialog.Root>
<Dialog.Trigger class="odbd-button" data-variant="solid" data-size="md">
승인 요청 열기
</Dialog.Trigger>
<Dialog.Backdrop />
<Dialog.Positioner>
<Dialog.Content class="dialog-tooltip__content">
<header class="dialog-tooltip__header">
<div>
<Dialog.Title>승인 요청</Dialog.Title>
<Dialog.Description>
출고 보류를 해제하기 전에 SLA 기준과 담당 팀 확인 상태를 함께 검토해요.
</Dialog.Description>
</div>
<Dialog.CloseTrigger
class="odbd-button dialog-tooltip__close"
data-variant="ghost"
data-size="icon"
aria-label="대화상자 닫기"
>
×
</Dialog.CloseTrigger>
</header>
<section class="dialog-tooltip__panel" aria-label="승인 세부 정보">
<div class="dialog-tooltip__row">
<span>상태 기준</span>
<Tooltip.Root
openDelay={120}
closeDelay={80}
positioning={{ placement: 'top', gutter: 8 }}
>
<Tooltip.Trigger
class="odbd-button dialog-tooltip__info"
data-variant="ghost"
data-size="icon"
aria-label="상태 기준 설명"
>
?
</Tooltip.Trigger>
<Tooltip.Positioner>
<Tooltip.Content>
SLA 4시간을 초과하고 고객 알림이 끝난 항목만 승인 후보가 돼요.
</Tooltip.Content>
</Tooltip.Positioner>
</Tooltip.Root>
</div>
<dl class="dialog-tooltip__facts">
<div>
<dt>요청자</dt>
<dd>운영팀</dd>
</div>
<div>
<dt>대상</dt>
<dd>출고 보류 12건</dd>
</div>
<div>
<dt>위험도</dt>
<dd>중간</dd>
</div>
</dl>
</section>
<div class="dialog-tooltip__actions">
<Dialog.CloseTrigger class="odbd-button" data-variant="outline" data-size="md">
보류
</Dialog.CloseTrigger>
<Dialog.CloseTrigger class="odbd-button" data-variant="solid" data-size="md">
승인
</Dialog.CloseTrigger>
</div>
</Dialog.Content>
</Dialog.Positioner>
</Dialog.Root>
</div>
<style>
.dialog-tooltip {
display: grid;
width: min(100%, 28rem);
min-height: 9rem;
place-items: center;
}
:global(.dialog-tooltip__content) {
display: grid;
width: min(100%, 30rem);
gap: var(--odbd-space-5);
}
.dialog-tooltip__header {
display: flex;
align-items: start;
justify-content: space-between;
gap: var(--odbd-space-4);
}
.dialog-tooltip__header > div {
display: grid;
min-width: 0;
gap: var(--odbd-space-1);
}
:global(.dialog-tooltip__close),
:global(.dialog-tooltip__info) {
flex: 0 0 auto;
}
.dialog-tooltip__panel {
display: grid;
gap: var(--odbd-space-4);
padding: var(--odbd-space-4);
background: var(--odbd-color-surface-raised);
border: 1px solid var(--odbd-color-border);
border-radius: var(--odbd-radius-md);
}
.dialog-tooltip__row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--odbd-space-3);
color: var(--odbd-color-foreground);
font-weight: 650;
}
.dialog-tooltip__facts {
display: grid;
gap: var(--odbd-space-3);
margin: 0;
}
.dialog-tooltip__facts div {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--odbd-space-4);
}
.dialog-tooltip__facts dt {
color: var(--odbd-color-muted-foreground);
font-size: var(--odbd-font-size-sm);
}
.dialog-tooltip__facts dd {
margin: 0;
color: var(--odbd-color-foreground);
font-weight: 650;
}
.dialog-tooltip__actions {
display: flex;
flex-wrap: wrap;
justify-content: end;
gap: var(--odbd-space-2);
}
</style>