반응형
굳이 앵귤러가 아니더라고, 우리는 마우스 이벤트로, 마우스를 가져다 대면 도움말과 같은 말풍선을 만들고 싶을 때가 많다.
운영하고 있는 웹사이트는 Angular 기반이고, Angular 사용자에게 도움을 위한 글이니 다른 프레임워크를 사용하고 계시다면 적용되지 않아요.
기본 지식 : Angular 에서 마우스를 가져다대는 이벤트 (mouseover, hover, onmouse)를 했을 때에, 말풍선 등 도움말을 잠시 보여주는 기능은 matTooltip이며, 이를 커스터마이징 하는 것은 matTooltipClass 이다.
공식 문서
https://material.angular.io/components/tooltip/examples
하지만 여기서 문제가 발생하는 인원들이 생기죠. 하란대로
.html
<button mat-raised-button
matTooltip="Info about the action"
matTooltipClass="example-tooltip-red"
aria-label="Button that shows a red tooltip"
class="example-button">
Red-tooltip Action
</button>
.css
.example-button {
margin-top: 16px;
}
.example-tooltip-red {
background: #b71c1c;
}
이와 같은 코드를 사용했을 때에는 우리가 원하는 결과물은 아래와 같다.
하지만 우리가 여기서 함께 가야 할 것이 있어요. 이 2가지만 조심하면 됩니다.
1. app.module.ts 를 간다
a. 상단에 tooltip module 을 들여온다
import { MatTooltipModule } from '@angular/material/tooltip';
b. imports[ ] 에 사용한다고 말해준다
MatTooltipModule
2. css에 커스텀하는 툴팁을 더할 때에는 ::ng-deep을 붙여준다
::ng-deep .custom-tooltip {
width: fit-content;
height: fit-content;
font-size: 40px;
background-color: transparent;
}
2번은 따로 처리를 하지 않아도 적용이 되는 경우가 있어요. 스타일이란 것은 우리가 전역적으로 입히는 것이 있기 때문에 먼저 적용을 하고 싶다면 !important 를 붙여도 되지만, 확실하게 하자구요~
적용 결과
반응형
'Angular' 카테고리의 다른 글
Angular url 쿼리 파라미터, 라우팅 파라미터 (0) | 2021.07.19 |
---|---|
Angular html checkbox multiple selection, 체크박스 여러개 선택해 저장하기 (0) | 2021.07.07 |
Angular scrollable modal (0) | 2021.06.16 |
Angular 컴포넌트간 데이터 / 값 전달하기 (0) | 2021.05.18 |