1. 찾아보게 된 이유
- 구현할 내용: 특정 객체에 mouse hover시 Bootstrap tooltip을 표시하는 기능
- 구현한 내용:
- 아래의 코드와 같이 구현.
<BButton variant="check" size="sm" v-b-tooltip="$tt('saveArticle')" @click="saveArticleBtnClicked" />
- 버그: 클릭한 이후에도 tooltip 이 사라지지 않음.
2. 해결
- tooltip의 옵션에 ‘hover’ 추가.
<BButton
variant="check"
size="sm"
v-b-tooltip.hover="$tt('saveArticle')"
@click="saveArticleBtnClicked"
/>
3. 배웠던 내용
- 의사 클래스들의 구체적인 사양
- focus: 특정 html 요소가 focus 됨. 보통 요소가 클릭 or 탭 되었을 때.
- active: 특정 html 요소가 활성화 됨. 보통 사용자가 요소를 클릭한 이후 - 클릭 버튼 떼기 전까지.
4. 레퍼런스
- 의사 클래스: https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-classes
- :focus : https://developer.mozilla.org/ko/docs/Web/CSS/:focus
- :hover : https://developer.mozilla.org/ko/docs/Web/CSS/:hover
- :active : https://developer.mozilla.org/ko/docs/Web/CSS/:active
:hover - CSS: Cascading Style Sheets | MDN
:hover CSS 의사 클래스는 사용자가 포인팅 장치를 사용해 상호작용 중인 요소를 선택합니다. 보통 사용자의 커서(마우스 포인터)가 요소 위에 올라가 있으면 선택됩니다.
developer.mozilla.org
:focus - CSS: Cascading Style Sheets | MDN
CSS :focus 의사 클래스는 양식의 입력 칸 등 포커스를 받은 요소를 나타냅니다. 보통 사용자가 요소를 클릭 또는 탭하거나, 키보드 Tab 키로 선택했을 때 발동합니다.
developer.mozilla.org
의사 클래스 - CSS: Cascading Style Sheets | MDN
CSS 의사 클래스(가상 클래스)는 선택자에 추가하는 키워드로, 선택한 요소가 특별한 상태여야 만족할 수 있습니다. 예를 들어 :hover를 사용하면 포인터를 올렸을 때에만 글씨 색을 바꾸고 싶을
developer.mozilla.org
:active - CSS: Cascading Style Sheets | MDN
:active CSS 의사 클래스는 사용자가 활성화한 요소(버튼 등)를 나타냅니다. 마우스를 사용하는 경우, "활성"이란 보통 마우스 버튼을 누르는 순간부터 떼는 시점까지를 의미합니다.
developer.mozilla.org
'TIL > Frontend' 카테고리의 다른 글
[JS] 전역 객체 globalThis - global, window, self... (0) | 2024.01.20 |
---|---|
[JS] Switch-Case문 내부의 Scope, ESLint (0) | 2024.01.17 |