[SAM2.0]Components

popover - complex

HTML 구조

<div class="ui-popover ui-popover--complex">
  <button
    type="button"
    class="app-utils__item app-utils__item--notify has-value js-popover-toggle"
    aria-label="알림"
    aria-haspopup="true"
    aria-expanded="false"
    aria-controls="popover-notify"
  ></button>

  <div class="ui-popover__panel" id="popover-notify">
    <div class="ui-popover__header">
      <span class="ui-popover__bundle">
        <span class="ui-popover__title">알림</span>
        <span class="ui-popover__count">(67)</span>
      </span>

      <button
        type="button"
        class="ui-icon-button ui-icon-button--settings"
        aria-label="수신 설정"
        data-tooltip="수신 설정"
      ></button>
    </div>

    <div class="ui-popover__content ui-popover__content--scroll">
      <ul class="utils-notify">
        <li class="utils-notify__item">
          <a href="#" class="utils-notify__card">
            <p class="utils-notify__message">
              [광고 검수대기] 20251021_인스트림 풀배너_광고가 검수대기 중입니다.
            </p>
            <time class="utils-notify__time">11-10 12:45</time>
          </a>
        </li>
        <!-- ... 기타 알림 항목들 ... -->
      </ul>
    </div>
    <div class="ui-popover__footer">
      <button type="button" class="ui-button ui-button--small ui-button--secondary">이력보기</button>
      <button type="button" class="ui-button ui-button--small ui-button--secondary">모두읽음</button>
    </div>
  </div>
</div>

popover - tooltip

HTML 구조

<div class="ui-popover ui-popover--tooltip">
  <button
    type="button"
    class="ui-popover__button-info js-popover-toggle"
    aria-label="요약 보고서 설명"
    aria-haspopup="true"
    aria-expanded="true"
  ></button>

  <div class="ui-popover__panel" hidden>
    <div class="ui-popover__content">
      <div class="ui-popover__tooltip-text">요약 보고서에서는 직접광고 지표만 보여집니다.</div>
    </div>
  </div>
</div>

Components - popover