Angular Content Projection Selector Tooltip

<div class="relative flex items-center gap-2">
  <h3><ng-content></ng-content></h3>
  <div
    *ngIf="width >= 1280"
    class="px-2 text-white rounded-full cursor-pointer bg-primary hover:bg-primary-400"
    (mouseover)="isOver = true"
    (mouseleave)="isOver = false"
  >
    ?
  </div>
  <div
    *ngIf="width < 1280"
    class="px-2 text-white rounded-full cursor-pointer bg-primary hover:bg-primary-400"
    (click)="isOver = !isOver"
  >
    ?
  </div>
  <div
    class="absolute left-0 z-30 flex flex-wrap w-full px-4 py-2 text-sm bg-gray-200 rounded-md top-7"
    *ngIf="isOver"
  >
    <ng-content select="[tooltip]"></ng-content>
  </div>
</div>

위 코드에서 select="[tooltip]" 부분은 Angular의 Content Projection 및 Selectors를 사용하는 부분입니다.

select="[tooltip]"는 HTML 템플릿에서 를 통해 전달된 콘텐츠 중에서 [tooltip] 속성을 가진 요소를 선택하겠다는 의미입니다.

는 부모 컴포넌트로부터 전달된 콘텐츠를 표시하는 Angular의 내장 지시자입니다. 즉, 부모 컴포넌트에서

 <app-tooltip-header>
           제목
           <p tooltip>
             마우스 올리면 보이는 내용
           </p>
         </app-tooltip-header>