TOOLTIPS

사용자에게 보충 설명이나 추가 정보가 필요할 경우 표시됩니다.
툴팁안에 들어가는 내용은 간결해야하며, 3줄 이내로 작성할 것을 권장합니다.

          
    <div class="tooltip">
      <button type="button">
        <span class="tooltip__item">
          <span class="tooltip__content is-rightBottom">
            설명 텍스트 설명 텍스트 설명 텍스트 설명 텍스트  설명 텍스트 설명 텍스트 설명 텍스트 설명 텍스트 설명 텍스트 설명 텍스트
          </span>
        </span>
        텍스트
      </button>
    </div>
    <div class="tooltip">
      <button type="button">
        텍스트
        <span class="tooltip__item">
          <span class="tooltip__content is-rightBottom">
            설명 텍스트 설명 텍스트 설명 텍스트 설명 텍스트  설명 텍스트 설명 텍스트 설명 텍스트 설명 텍스트 설명 텍스트 설명 텍스트
          </span>
        </span>
      </button>
    </div>
    <div class="tooltip is-point">
      <button type="button">
        텍스트
        <span class="tooltip__item">
          <span class="tooltip__content is-rightBottom">
            설명 텍스트 설명 텍스트 설명 텍스트 설명 텍스트  설명 텍스트 설명 텍스트 설명 텍스트 설명 텍스트 설명 텍스트 설명 텍스트
          </span>
        </span>
      </button>
    </div>

    <div class="tooltip">
      <button type="button">
        오른쪽 아래로 열리는 툴팁입니다.
        <span class="tooltip__item">
          <span class="tooltip__content is-rightBottom">
            설명 텍스트 설명 텍스트 설명 텍스트 설명 텍스트  설명 텍스트 설명 텍스트 설명 텍스트 설명 텍스트 설명 텍스트 설명 텍스트
          </span>
        </span>
      </button>
    </div>
    <div class="tooltip">
      <button type="button">
        왼쪽 아래로으로 열리는 툴팁입니다.
        <span class="tooltip__item">
          <span class="tooltip__content is-leftBottom">
            설명 텍스트 설명 텍스트 설명 텍스트 설명 텍스트  설명 텍스트 설명 텍스트 설명 텍스트 설명 텍스트 설명 텍스트 설명 텍스트
          </span>
        </span>
      </button>
    </div>
    <div class="tooltip">
      <button type="button">
        가운데 아래로으로 열리는 툴팁입니다.
        <span class="tooltip__item">
          <span class="tooltip__content is-centerBottom">
            설명 텍스트 설명 텍스트 설명 텍스트 설명 텍스트  설명 텍스트 설명 텍스트 설명 텍스트 설명 텍스트 설명 텍스트 설명 텍스트
          </span>
        </span>
      </button>
    </div>

PAGINATION

화면의 목적과 기능의 맞게 선택하여 사용하며, 그리드 하단에 중앙에 배치합니다.
그리드와의 간격은 20px, Bottom과의 간격 30px을 유지합니다.

          
      <div id="pagination1" class="tui-pagination"></div>
      <script>
        const pagination = new Pagination('.tui-pagination', { 
          totalItems: 100,
          itemsPerPage: 10,
          visiblePages: 5,
        });
      </script>

Reference

Tui pagination