ToolTip 에서 줄바꿈 break line

Angular에서 matToolTip = "" 은 마우스를 올렸을 때에 부연설명을 넣을 수 있다, 하지만 이 부분의 스타일들을 고치는 방법은 좀 특별하다. 이 안에서는 \n 도 돌아가지 않고, &nbsp 와 같은 것도 잘 먹히지 않는다.

 

이러한 경우 Angular 에서 matToolTip의 스타일을 변경하는 방법에 대해 해결 방법만 간략하게.

 

일반적으로 style="" 로 넣는다고 적용이 되지 않는다.

::ng-deep .mat-tooltip {
    font-size: large !important;
    white-space: pre-wrap;
}

설명.

가상 클래스 ::ng-deep가 적용된 CSS는 컴포넌트의 뷰 캡슐화 정책을 완전히 무시합니다. 그래서 ::ng-deep이 적용된 규칙은 전역 스타일 규칙이 되기 때문에 해당 컴포넌트는 물론이고 이 컴포넌트의 자식 컴포넌트에 모두 적용됩니다.

 

font-size 로 폰트의 사이즈를 키우고, white-space: pre-wrap 을 주어서 줄바꿈을 받겠다는 설정을 한다. 여기서 white-space 는 일반적으로 <input type=text> 받을 때에도 pre-wrap 사용해서 줄바꿈을 받을 수 있는 설정이니 유용하게 쓰면 된다