• welcome
  • faqs
  • principle
  • semantic
  • tokens
  • components
  • theming
  • typography
  • colors
  • utilities
  • badge
  • breadcrumb
  • button
  • calendar
  • cards
  • checkbox
  • input
  • list
  • message
  • pagination
  • panel
  • segments
  • selectbox
  • slider
  • switch
  • table
  • tabs
  • tag
  • form
  • grid
  • grid2
  • modal
  • toast
  • tooltip

    • Tooltip

    사용자 이벤트로 요소에 접근 시 요소에 대한 간단한 정보를 시각적으로 보여주는 UI요소

    fr-tooltip
    JS

    Base

    Base 
    
<div class="parent-element" 
  fr-tooltip="props string"
>...</div>

    Invert

    Equal Theme
    Invert Theme 
    
<!-- @theme: light | dark(default) -->
<div class="parent-element" 
  fr-tooltip="theme: {@theme}"
>...</div>

    Trigger

    Hover
    Click
    
<!-- @trigger: hover(default) | click -->
<div class="parent-element" 
  fr-tooltip="trigger: {@trigger}"
>...</div>

    Contents Type

    [fr-target] 속성이 지정된 html source를 tooltip 컨텐츠로 활용 가능합니다.

    Attr: content
    Target
    TItle

    Html Contents

    
<!-- type content -->
<div class="parent-element" 
  fr-tooltip="content: {tooltip content}"
>...</div>
<!-- type target -->
<div class="parent-element" 
  fr-tooltip
>
  <span fr-target>
    <!-- tooltip content -->
  </span>
</div>

    Position

    pos 속성은 기본적으로 '{direct}-{align}' 구조로 적용 합니다. 예를들면 'top-center', 'left-start' 처럼, 하지만 가운데 정렬을 기본 값으로 두고 position만 입력하더라도 동작 가능합니다.

    Top
    Bottom
    Left
    Right 
    
<!-- @pos: top | left | right | bottom -->
<div class="parent-element" 
  fr-tooltip="pos: {@pos}"
>...</div>

    Position and Align

    Top | Left
    T-END
    TOP-END
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corrupti tempore necessitatibus nam delectus illum qui tenetur fuga, iure id a voluptas. Neque qui quo alias nulla odit adipisci suscipit totam.
    T-CENTER
    TOP-CENTER
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corrupti tempore necessitatibus nam delectus illum qui tenetur fuga, iure id a voluptas. Neque qui quo alias nulla odit adipisci suscipit totam.
    T-START
    TOP-START
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corrupti tempore necessitatibus nam delectus illum qui tenetur fuga, iure id a voluptas. Neque qui quo alias nulla odit adipisci suscipit totam.
    Top | Right
    L-END
    LEFT-END
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corrupti tempore necessitatibus nam delectus illum qui tenetur fuga, iure id a voluptas. Neque qui quo alias nulla odit adipisci suscipit totam.
    R-END
    RIGHT-END
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corrupti tempore necessitatibus nam delectus illum qui tenetur fuga, iure id a voluptas. Neque qui quo alias nulla odit adipisci suscipit totam.
    L-CENTET
    LEFT-CENTER
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corrupti tempore necessitatibus nam delectus illum qui tenetur fuga, iure id a voluptas. Neque qui quo alias nulla odit adipisci suscipit totam.
    R-CENTET
    RIGHT-CENTER
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corrupti tempore necessitatibus nam delectus illum qui tenetur fuga, iure id a voluptas. Neque qui quo alias nulla odit adipisci suscipit totam.
    L-START
    LEFT-START
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corrupti tempore necessitatibus nam delectus illum qui tenetur fuga, iure id a voluptas. Neque qui quo alias nulla odit adipisci suscipit totam.
    R-START
    RIGHT-START
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corrupti tempore necessitatibus nam delectus illum qui tenetur fuga, iure id a voluptas. Neque qui quo alias nulla odit adipisci suscipit totam.
    Bottom | Left
    B-END
    BOTTOM-END
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corrupti tempore necessitatibus nam delectus illum qui tenetur fuga, iure id a voluptas. Neque qui quo alias nulla odit adipisci suscipit totam.
    B-CENTER
    BOTTOM-CENTER
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corrupti tempore necessitatibus nam delectus illum qui tenetur fuga, iure id a voluptas. Neque qui quo alias nulla odit adipisci suscipit totam.
    B-START
    BOTTOM-START
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corrupti tempore necessitatibus nam delectus illum qui tenetur fuga, iure id a voluptas. Neque qui quo alias nulla odit adipisci suscipit totam.
    Bottom | Right
    
<!-- (position): top | left | right | bottom -->
<!-- (align): start | center | end -->
<!-- @pos: (position)-(align) -->
<div class="parent-element" 
  fr-tooltip="pos: {@pos}"
>...</div>

    Offset

    Offset 10px
    Offset 20px
    Offset 0px
    Offset -10px 
    
<!-- @offset: number(px) -->
<div class="parent-element" 
  fr-tooltip="offset: {@offset}"
>...</div>

    Size

    Normal
    Small
    
<!-- @size: small | null -->
<div class="parent-element" 
  fr-tooltip="size: {@size}"
>...</div>

    Max width

    Max Width 150
    Width 150px
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corrupti tempore necessitatibus nam delectus illum qui tenetur fuga, iure id a voluptas. Neque qui quo alias nulla odit adipisci suscipit totam.
    Max Width 250
    Width 250px
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corrupti tempore necessitatibus nam delectus illum qui tenetur fuga, iure id a voluptas. Neque qui quo alias nulla odit adipisci suscipit totam.
    Max Width 500
    Width 500px
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corrupti tempore necessitatibus nam delectus illum qui tenetur fuga, iure id a voluptas. Neque qui quo alias nulla odit adipisci suscipit totam.
    
<!-- @maxWidth: number-->
<!-- default: 250-->
<div class="parent-element" 
  fr-tooltip="maxWidth: {@maxWidth}"
>...</div>

    Text Alignment

    Align Left
    Align Left
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corrupti tempore necessitatibus nam delectus illum qui tenetur fuga, iure id a voluptas. Neque qui quo alias nulla odit adipisci suscipit totam.
    Align Center
    Align Left Center
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corrupti tempore necessitatibus nam delectus illum qui tenetur fuga, iure id a voluptas. Neque qui quo alias nulla odit adipisci suscipit totam.
    Align Right
    Align Right
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corrupti tempore necessitatibus nam delectus illum qui tenetur fuga, iure id a voluptas. Neque qui quo alias nulla odit adipisci suscipit totam.
    
<!-- @textAlign: 'left | 'center' | 'right'-->
<!-- default: center-->
<div class="parent-element" 
  fr-tooltip="textAlign: {@textAlign}"
>...</div>

    Padding

    Padding 4
    padding: 4px
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corrupti tempore necessitatibus nam delectus illum qui tenetur fuga, iure id a voluptas. Neque qui quo alias nulla odit adipisci suscipit totam.
    Padding 8
    padding: 8px
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corrupti tempore necessitatibus nam delectus illum qui tenetur fuga, iure id a voluptas. Neque qui quo alias nulla odit adipisci suscipit totam.
    Padding 16
    padding: 16px
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corrupti tempore necessitatibus nam delectus illum qui tenetur fuga, iure id a voluptas. Neque qui quo alias nulla odit adipisci suscipit totam.
    Padding 24
    padding: 24px
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corrupti tempore necessitatibus nam delectus illum qui tenetur fuga, iure id a voluptas. Neque qui quo alias nulla odit adipisci suscipit totam.
    
<!-- @textAlign: number(px)-->
<!-- default: 8-->
<div class="parent-element" 
  fr-tooltip="padding: {@padding}"
>...</div>