ReadTip

원문 보기 위키 갱신 2026.10.11

ReadTip (읽기 힌트)

문서 속 특정 내용에 힌트을 보여주는 컴포넌트예요.

출처: 문서

본문

언제 사용하나요

html 문서에서 특정 내용에 대해 힌트을 보여줘야 할 때 사용해요.

기본 사용법

selector를 설정해 readtip을 표시할 요소를 고르고, title과 content를 전달해 표시할 내용을 정해요. :::demo


<template>
  <d-read-tip :read-tip-options="readTipOptions">
    <h1>Let's see how to use ReadTip</h1>
    <p class="readtip-content">Set selector to display readtip</p>
    <p>The following is the target you want to show readtip</p>
    <span class="readtip-target">@Jack</span>
  </d-read-tip>
</template>

<script setup>
const readTipOptions = {
  trigger: 'hover',
  rules: {
    trigger: 'hover',
    position: 'top',
    selector: '.readtip-target',
    title: 'Name: Jack',
    content: "This is Jack's profile",
  },
};
</script>

<style>
.source {
  overflow: visible;
}

.readtip-container {
  padding: 12px;
}

.readtip-target {
  font-weight: bold;
  cursor: pointer;
  margin-top: 16px;
}

.readtip-target:hover {
  text-decoration: underline;
}
</style>

:::

여러 힌트를 포함한 readtip

여러 개의 rule을 전달해 요소마다 다른 readtip 표시 방식을 설정할 수 있어요. :::demo


<template>
  <d-read-tip :read-tip-options="readTipOptions">
    <h1>Multiple Readtips</h1>
    <h2 class="introduction">You can pass in multiple rules to display different readtips</h2>
    <p class="first-content">Click here to display first content</p>
    <p class="second-content">Click here to display second content</p>
    <h3 class="third-content">Hover here to display third content</h3>
    <h3 class="third-content">Hover here to display third content</h3>
  </d-read-tip>
</template>

<script setup>
const readTipOptions = {
  trigger: 'click',
  showAnimate: false,
  mouseenterTime: 100,
  mouseleaveTime: 100,
  position: 'top',
  overlayClassName: 'read-tip-container',
  appendToBody: false,
  rules: [
    {
      selector: '.first-content',
      position: 'top',
      title: 'This Is the First Title',
      content: 'Lorem ipsum dolor sit amet, consectetur ad.',
      overlayClassName: 'red',
    },
    {
      selector: '.second-content',
      position: 'left',
      title: 'This Is the Second Title',
      content: 'Class aptent taciti sociosqu ad litora torquent per conubia nostra',
      overlayClassName: 'red',
    },
    {
      trigger: 'hover',
      selector: '.third-content',
      position: 'bottom',
      title: 'This Is the Third Title',
      content: 'Aenean libero urna, scelerisque tincidunt',
    },
    {
      trigger: 'hover',
      selector: '.four-content',
      position: 'right',
      title: 'This Is the Third Title',
      content: 'Aenean libero urna, scelerisque tincidunt',
    },
  ],
};
</script>

<style>
.source {
  overflow: visible;
}

.readtip-container {
  padding: 12px;
}

.readtip-target {
  font-weight: bold;
  cursor: pointer;
  margin-top: 16px;
}

.readtip-target:hover {
  text-decoration: underline;
}

.first-content {
  font-weight: bold;
  margin-bottom: 4px;
  cursor: pointer;
}

.second-content {
  font-weight: bold;
  cursor: pointer;
}

.third-content {
  cursor: pointer;
}

.red {
  color: red;
}
</style>

:::

템플릿으로 표시 내용 전달하기

template을 전달해 표시할 내용을 직접 커스터마이즈할 수 있어요. template을 전달하면 title과 content는 따로 넘겨주지 않아도 돼요. :::demo


<template>
  <d-read-tip :read-tip-options="readTipOptions">
    <h1>You can also pass in template</h1>
    <p class="readtip-content">Write your own template</p>
    <p>The following is the target you want to show readtip</p>
    <h3 class="readtip-target2">DEVUI Course</h3>
    <h3 class="readtip-target2">Another DEVUI Course with same class name</h3>
    <template #content>
      <d-card class="d-card">
        <template #avatar>
          <d-avatar name="DevUI"></d-avatar>
        </template>
        <template #title> DEVUI Course</template>
        <template #subtitle class="read-tip-demo-icon">
          <d-icon name="company-member"></d-icon>
          <span>DevUI</span></template>
        <template #content>
          DEVUI is a free open-source and common solution for the front end of enterprise mid- and back-end products.
          Its design values are
          basedon...
        </template>
        <template #actions>
          <div class="card-block">
            <d-icon name="like"></d-icon>
            <span>12</span></div>
          <div class="card-block">
            <d-icon name="star-o"></d-icon>
            <span>8</span></div>
          <div class="card-block">
            <d-icon name="message"></d-icon>
            <span>8</span></div>
        </template>
      </d-card>
    </template>
  </d-read-tip>
</template>

<script setup>
const readTipOptions = {
  trigger: 'click',
  rules: {
    trigger: 'click',
    position: 'top',
    selector: '.readtip-target2',
    title: 'Name: Jack',
    content: "This is Jack's profile",
  },
};
</script>

<style lang="scss">
.read-tip-demo-icon {
  cursor: pointer;
  font-size: 16px;
  margin-right: 8px;
  vertical-align: middle;
}

.read-tip-demo-icon + span {
  vertical-align: middle;
}

.card-block {
  margin-right: 16px;

  i {
    cursor: pointer;
    font-size: 16px;
    margin-right: 8px;
    vertical-align: middle;
  }

  i + span {
    vertical-align: middle;
  }
}

.card-container {
  width: 350px;
}

.action-text {
  color: #8a8e99;
}
</style>

:::

비동기로 데이터 가져오기

:::demo


<template>
  <d-read-tip :read-tip-options="readTipOptions">
    <h1>You can pass data asynchronously</h1>
    <p class="readtip-content">Using function fullElement to pass data</p>
    <p>The following is the target you want to show readtip</p>
    <h4 class="readtip-target">Display readtip</h4>
  </d-read-tip>
</template>

<script setup>
const readTipOptions = {
  trigger: 'click',
  rules: {
    selector: 'h4',
    trigger: 'click',
    dataFn: getDataFromDB,
    key: 'GetData',
  },
};

function getDataFromDB({ element, rule }) {
  return { content: element.innerHTML, title: rule.key };
}
</script>

<style>
.readtip-container {
  padding: 12px;
}

.readtip-target {
  font-weight: bold;
  cursor: pointer;
  margin-top: 16px;
}

.readtip-target:hover {
  text-decoration: underline;
}

.red {
  color: red;
}
</style>

:::

ReadTip 파라미터

파라미터	타입	기본값	설명	Demo 링크
read-tip-options	ReadTipOptions	--	필수, 힌트 옵션 설정	기본 사용법
read-tip-options.rules	ReadTipRules	--	필수, readtip 콘텐츠 설정	여러 툴팁을 포함한 readtip

ReadTip 슬롯

슬롯명	설명
content	콘텐츠 커스텀

ReadTip 타입 정의

ReadTipOptions

interface ReadTipOptions {
  trigger?: 'hover' | 'click'; // 默认值是 hover
  showAnimate?: boolean; // 默认值是 false
  mouseenterTime?: number; // 默认值是 100
  mouseleaveTime?: number; // 默认值是 100
  position?: PositionType | PositionType[]; // 默认值是 'top'
  overlayClassName?: string; // 默认值为空字符串
  appendToBody?: boolean; // 默认值为true
  rules: ReadTipRules;
}

ReadTipRules

type ReadTipRules = ReadTipRule | ReadTipRule[];

ReadTipRule

interface ReadTipRule {
  key?: string;
  selector: string;
  trigger?: 'hover' | 'click'; // 可以继承自 ReadTipOptions
  title?: string;
  content?: string;
  showAnimate?: boolean; // 可以继承自 ReadTipOptions
  mouseenterTime?: number; // 可以继承自 ReadTipOptions
  mouseleaveTime?: number; // 可以继承自 ReadTipOptions
  position?: PositionType | PositionType[]; // 可以继承自 ReadTipOptions
  overlayClassName?: string; // 可以继承自 ReadTipOptions
  appendToBody?: boolean; //可以继承自 ReadTipOtions
  //customData与template搭配使用，customData为传入模板的上下文，可以自定义模板内容
  dataFn?: ({
    element,
    rule: ReadTipRule,
  }) => Observable<{ title?: string; content?: string; template?: TemplateRef<any>; customData?: any }>;
}

더 알아보기 (Learn more)

selector 기반 rule만 잘 작성하면 문서 어디에든 힌트를 붙일 수 있어요. dataFn으로 비동기 데이터도 연동할 수 있어요.