맥락 도움말

상황별 도움말 컴포넌트입니다.

#help #context #guide

HTML

<div class="krds-contextual-help top left">
	<p class="tooltip-txt">예시이미지(상단 왼쪽)</p>
	<div class="tooltip-action">
		<button type="button" class="krds-btn medium icon tooltip-btn">
			<span class="sr-only">도움말</span>
			<i class="svg-icon ico-tooltip"></i>
		</button>
		<div class="tooltip-popover" role="tooltip">
			<h4 class="tooltip-title">도움말 제목</h4>
			<div class="tooltip-contents">
				<p>컴포넌트 주변에 배치되어 해당 컴포넌트의 상태나 관련된 상세 정보를 제공하는 컴포넌트이다. 맥락적 도움말은 정보 아이콘이나 도움 아이콘 버튼을 통해 사용자가 요청하는 경우에만 화면에 표시된다.</p>
				<div class="btn-wrap">
					<a href="#;" class="krds-btn xsmall link basic">바로가기 <i class="svg-icon ico-angle right"></i></a>
				</div>
			</div>
			<button type="button" class="krds-btn xsmall icon tooltip-close">
				<span class="sr-only">닫기</span>
				<i class="svg-icon ico-modal-close"></i>
			</button>
		</div>
	</div>
</div>



<div class="krds-contextual-help top center">
	<p class="tooltip-txt">예시이미지(상단 중앙)</p>
	<div class="tooltip-action">
		<button type="button" class="krds-btn medium icon tooltip-btn" aria-expanded="false">
			<span class="sr-only">도움말</span>
			<i class="svg-icon ico-tooltip"></i>
		</button>
		<div class="tooltip-popover" role="tooltip">
			<h4 class="tooltip-title">도움말 제목</h4>
			<div class="tooltip-contents">
				<p>컴포넌트 주변에 배치되어 해당 컴포넌트의 상태나 관련된 상세 정보를 제공하는 컴포넌트이다. 맥락적 도움말은 정보 아이콘이나 도움 아이콘 버튼을 통해 사용자가 요청하는 경우에만 화면에 표시된다.</p>
				<div class="btn-wrap">
					<a href="#;" class="krds-btn xsmall link basic">바로가기 <i class="svg-icon ico-angle right"></i></a>
				</div>
			</div>
			<button type="button" class="krds-btn xsmall icon tooltip-close">
				<span class="sr-only">닫기</span>
				<i class="svg-icon ico-modal-close"></i>
			</button>
		</div>
	</div>
</div>



<div class="krds-contextual-help top right">
	<p class="tooltip-txt">예시이미지(상단 오른쪽)</p>
	<div class="tooltip-action">
		<button type="button" class="krds-btn medium icon tooltip-btn" aria-expanded="false">
			<span class="sr-only">도움말</span>
			<i class="svg-icon ico-tooltip"></i>
		</button>
		<div class="tooltip-popover" role="tooltip">
			<h4 class="tooltip-title">도움말 제목</h4>
			<div class="tooltip-contents">
				<p>컴포넌트 주변에 배치되어 해당 컴포넌트의 상태나 관련된 상세 정보를 제공하는 컴포넌트이다. 맥락적 도움말은 정보 아이콘이나 도움 아이콘 버튼을 통해 사용자가 요청하는 경우에만 화면에 표시된다.</p>
				<div class="btn-wrap">
					<a href="#;" class="krds-btn xsmall link basic">바로가기 <i class="svg-icon ico-angle right"></i></a>
				</div>
			</div>
			<button type="button" class="krds-btn xsmall icon tooltip-close">
				<span class="sr-only">닫기</span>
				<i class="svg-icon ico-modal-close"></i>
			</button>
		</div>
	</div>
</div>


<br><br>


<div class="krds-contextual-help bottom left">
	<p class="tooltip-txt">예시이미지(하단 왼쪽)</p>
	<div class="tooltip-action">
		<button type="button" class="krds-btn medium icon tooltip-btn" aria-expanded="false">
			<span class="sr-only">도움말</span>
			<i class="svg-icon ico-tooltip"></i>
		</button>
		<div class="tooltip-popover" role="tooltip">
			<h4 class="tooltip-title">도움말 제목</h4>
			<div class="tooltip-contents">
				<p>컴포넌트 주변에 배치되어 해당 컴포넌트의 상태나 관련된 상세 정보를 제공하는 컴포넌트이다. 맥락적 도움말은 정보 아이콘이나 도움 아이콘 버튼을 통해 사용자가 요청하는 경우에만 화면에 표시된다.</p>
				<div class="btn-wrap">
					<a href="#;" class="krds-btn xsmall link basic">바로가기 <i class="svg-icon ico-angle right"></i></a>
				</div>
			</div>
			<button type="button" class="krds-btn xsmall icon tooltip-close">
				<span class="sr-only">닫기</span>
				<i class="svg-icon ico-modal-close"></i>
			</button>
		</div>
	</div>
</div>



<div class="krds-contextual-help bottom center">
	<p class="tooltip-txt">예시이미지(하단 중앙)</p>
	<div class="tooltip-action">
		<button type="button" class="krds-btn medium icon tooltip-btn" aria-expanded="false">
			<span class="sr-only">도움말</span>
			<i class="svg-icon ico-tooltip"></i>
		</button>
		<div class="tooltip-popover" role="tooltip">
			<h4 class="tooltip-title">도움말 제목</h4>
			<div class="tooltip-contents">
				<p>컴포넌트 주변에 배치되어 해당 컴포넌트의 상태나 관련된 상세 정보를 제공하는 컴포넌트이다. 맥락적 도움말은 정보 아이콘이나 도움 아이콘 버튼을 통해 사용자가 요청하는 경우에만 화면에 표시된다.</p>
				<div class="btn-wrap">
					<a href="#;" class="krds-btn xsmall link basic">바로가기 <i class="svg-icon ico-angle right"></i></a>
				</div>
			</div>
			<button type="button" class="krds-btn xsmall icon tooltip-close">
				<span class="sr-only">닫기</span>
				<i class="svg-icon ico-modal-close"></i>
			</button>
		</div>
	</div>
</div>



<div class="krds-contextual-help bottom right">
	<p class="tooltip-txt">예시이미지(하단 오른쪽))</p>
	<div class="tooltip-action">
		<button type="button" class="krds-btn medium icon tooltip-btn" aria-expanded="false">
			<span class="sr-only">도움말</span>
			<i class="svg-icon ico-tooltip"></i>
		</button>
		<div class="tooltip-popover" role="tooltip">
			<h4 class="tooltip-title">도움말 제목</h4>
			<div class="tooltip-contents">
				<p>컴포넌트 주변에 배치되어 해당 컴포넌트의 상태나 관련된 상세 정보를 제공하는 컴포넌트이다. 맥락적 도움말은 정보 아이콘이나 도움 아이콘 버튼을 통해 사용자가 요청하는 경우에만 화면에 표시된다.</p>
				<div class="btn-wrap">
					<a href="#;" class="krds-btn xsmall link basic">바로가기 <i class="svg-icon ico-angle right"></i></a>
				</div>
			</div>
			<button type="button" class="krds-btn xsmall icon tooltip-close">
				<span class="sr-only">닫기</span>
				<i class="svg-icon ico-modal-close"></i>
			</button>
		</div>
	</div>
</div>

Vue 컴포넌트

<template>
  <div class="krds-contextual-help top left">
	<p class="tooltip-txt">예시이미지(상단 왼쪽)</p>
	<div class="tooltip-action">
		<button type="button" class="krds-btn medium icon tooltip-btn">
			<span class="sr-only">도움말</span>
			<i class="svg-icon ico-tooltip"></i>
		</button>
		<div class="tooltip-popover" role="tooltip">
			<h4 class="tooltip-title">도움말 제목</h4>
			<div class="tooltip-contents">
				<p>컴포넌트 주변에 배치되어 해당 컴포넌트의 상태나 관련된 상세 정보를 제공하는 컴포넌트이다. 맥락적 도움말은 정보 아이콘이나 도움 아이콘 버튼을 통해 사용자가 요청하는 경우에만 화면에 표시된다.</p>
				<div class="btn-wrap">
					<a href="#;" class="krds-btn xsmall link basic">바로가기 <i class="svg-icon ico-angle right"></i></a>
				</div>
			</div>
			<button type="button" class="krds-btn xsmall icon tooltip-close">
				<span class="sr-only">닫기</span>
				<i class="svg-icon ico-modal-close"></i>
			</button>
		</div>
	</div>
</div>



<div class="krds-contextual-help top center">
	<p class="tooltip-txt">예시이미지(상단 중앙)</p>
	<div class="tooltip-action">
		<button type="button" class="krds-btn medium icon tooltip-btn" aria-expanded="false">
			<span class="sr-only">도움말</span>
			<i class="svg-icon ico-tooltip"></i>
		</button>
		<div class="tooltip-popover" role="tooltip">
			<h4 class="tooltip-title">도움말 제목</h4>
			<div class="tooltip-contents">
				<p>컴포넌트 주변에 배치되어 해당 컴포넌트의 상태나 관련된 상세 정보를 제공하는 컴포넌트이다. 맥락적 도움말은 정보 아이콘이나 도움 아이콘 버튼을 통해 사용자가 요청하는 경우에만 화면에 표시된다.</p>
				<div class="btn-wrap">
					<a href="#;" class="krds-btn xsmall link basic">바로가기 <i class="svg-icon ico-angle right"></i></a>
				</div>
			</div>
			<button type="button" class="krds-btn xsmall icon tooltip-close">
				<span class="sr-only">닫기</span>
				<i class="svg-icon ico-modal-close"></i>
			</button>
		</div>
	</div>
</div>



<div class="krds-contextual-help top right">
	<p class="tooltip-txt">예시이미지(상단 오른쪽)</p>
	<div class="tooltip-action">
		<button type="button" class="krds-btn medium icon tooltip-btn" aria-expanded="false">
			<span class="sr-only">도움말</span>
			<i class="svg-icon ico-tooltip"></i>
		</button>
		<div class="tooltip-popover" role="tooltip">
			<h4 class="tooltip-title">도움말 제목</h4>
			<div class="tooltip-contents">
				<p>컴포넌트 주변에 배치되어 해당 컴포넌트의 상태나 관련된 상세 정보를 제공하는 컴포넌트이다. 맥락적 도움말은 정보 아이콘이나 도움 아이콘 버튼을 통해 사용자가 요청하는 경우에만 화면에 표시된다.</p>
				<div class="btn-wrap">
					<a href="#;" class="krds-btn xsmall link basic">바로가기 <i class="svg-icon ico-angle right"></i></a>
				</div>
			</div>
			<button type="button" class="krds-btn xsmall icon tooltip-close">
				<span class="sr-only">닫기</span>
				<i class="svg-icon ico-modal-close"></i>
			</button>
		</div>
	</div>
</div>


<br><br>


<div class="krds-contextual-help bottom left">
	<p class="tooltip-txt">예시이미지(하단 왼쪽)</p>
	<div class="tooltip-action">
		<button type="button" class="krds-btn medium icon tooltip-btn" aria-expanded="false">
			<span class="sr-only">도움말</span>
			<i class="svg-icon ico-tooltip"></i>
		</button>
		<div class="tooltip-popover" role="tooltip">
			<h4 class="tooltip-title">도움말 제목</h4>
			<div class="tooltip-contents">
				<p>컴포넌트 주변에 배치되어 해당 컴포넌트의 상태나 관련된 상세 정보를 제공하는 컴포넌트이다. 맥락적 도움말은 정보 아이콘이나 도움 아이콘 버튼을 통해 사용자가 요청하는 경우에만 화면에 표시된다.</p>
				<div class="btn-wrap">
					<a href="#;" class="krds-btn xsmall link basic">바로가기 <i class="svg-icon ico-angle right"></i></a>
				</div>
			</div>
			<button type="button" class="krds-btn xsmall icon tooltip-close">
				<span class="sr-only">닫기</span>
				<i class="svg-icon ico-modal-close"></i>
			</button>
		</div>
	</div>
</div>



<div class="krds-contextual-help bottom center">
	<p class="tooltip-txt">예시이미지(하단 중앙)</p>
	<div class="tooltip-action">
		<button type="button" class="krds-btn medium icon tooltip-btn" aria-expanded="false">
			<span class="sr-only">도움말</span>
			<i class="svg-icon ico-tooltip"></i>
		</button>
		<div class="tooltip-popover" role="tooltip">
			<h4 class="tooltip-title">도움말 제목</h4>
			<div class="tooltip-contents">
				<p>컴포넌트 주변에 배치되어 해당 컴포넌트의 상태나 관련된 상세 정보를 제공하는 컴포넌트이다. 맥락적 도움말은 정보 아이콘이나 도움 아이콘 버튼을 통해 사용자가 요청하는 경우에만 화면에 표시된다.</p>
				<div class="btn-wrap">
					<a href="#;" class="krds-btn xsmall link basic">바로가기 <i class="svg-icon ico-angle right"></i></a>
				</div>
			</div>
			<button type="button" class="krds-btn xsmall icon tooltip-close">
				<span class="sr-only">닫기</span>
				<i class="svg-icon ico-modal-close"></i>
			</button>
		</div>
	</div>
</div>



<div class="krds-contextual-help bottom right">
	<p class="tooltip-txt">예시이미지(하단 오른쪽))</p>
	<div class="tooltip-action">
		<button type="button" class="krds-btn medium icon tooltip-btn" aria-expanded="false">
			<span class="sr-only">도움말</span>
			<i class="svg-icon ico-tooltip"></i>
		</button>
		<div class="tooltip-popover" role="tooltip">
			<h4 class="tooltip-title">도움말 제목</h4>
			<div class="tooltip-contents">
				<p>컴포넌트 주변에 배치되어 해당 컴포넌트의 상태나 관련된 상세 정보를 제공하는 컴포넌트이다. 맥락적 도움말은 정보 아이콘이나 도움 아이콘 버튼을 통해 사용자가 요청하는 경우에만 화면에 표시된다.</p>
				<div class="btn-wrap">
					<a href="#;" class="krds-btn xsmall link basic">바로가기 <i class="svg-icon ico-angle right"></i></a>
				</div>
			</div>
			<button type="button" class="krds-btn xsmall icon tooltip-close">
				<span class="sr-only">닫기</span>
				<i class="svg-icon ico-modal-close"></i>
			</button>
		</div>
	</div>
</div>
</template>

<script setup lang="ts">
// 맥락 도움말 컴포넌트
// 상황별 도움말 컴포넌트입니다.

import { ref } from 'vue'

// 필요한 상태 및 메서드 정의
const isActive = ref(false)

const handleClick = () => {
  isActive.value = !isActive.value
}
</script>

컴포넌트 정보

파일명: contextual_help.html
카테고리: 피드백
난이도: 보통