near_me
시작하기
keyboard_arrow_downwidgets
컴포넌트
keyboard_arrow_downlocal_mall
리소스
keyboard_arrow_down머티리얼 디자인 3 및 웹 컴포넌트 기반의 새로운 mdui 2가 출시되었습니다. mdui 2 개발 문서 보기.
툴팁
툴팁은 일반적으로 아이콘에 설명을 추가하는 데 사용되며, 내용은 보통 일반 텍스트로 이미지나 서식 있는 텍스트는 포함하지 않습니다.
호출 방식
- 사용자 정의 속성을 통한 호출
- JavaScript를 통한 호출
호출 방식
사용자 정의 속성을 통한 호출
이 방식을 사용하면 JavaScript 코드를 작성할 필요가 없습니다. 요소에 mdui-tooltip="options" 속성을 추가하는 것만으로 플러그인을 활성화할 수 있습니다.
예시
<button class="mdui-btn mdui-btn-icon" mdui-tooltip="{content: '인쇄'}">
<i class="mdui-icon material-icons">local_printshop</i>
</button>
<button class="mdui-btn mdui-btn-icon" mdui-tooltip="{content: '인쇄', position: 'top'}">
<i class="mdui-icon material-icons">local_printshop</i>
</button>
<button class="mdui-btn mdui-btn-icon" mdui-tooltip="{content: '인쇄', delay: 1000}">
<i class="mdui-icon material-icons">local_printshop</i>
</button>JavaScript를 통한 호출
컴포넌트 인스턴스화:
// selector는 CSS 선택자 또는 DOM 요소입니다.
// options는 설정 매개변수이며, 아래의 매개변수 목록을 참조하세요.
var inst = new mdui.Tooltip(selector, options);매개변수
| 매개변수 이름 | 유형 | 기본값 | 설명 |
|---|---|---|---|
position | string | auto | 툴팁의 위치. 허용되는 값은 auto, bottom, top, left, right입니다.auto인 경우 자동으로 위치를 판단합니다. 기본값은 아래쪽입니다. 우선순위는 bottom > top > left > right입니다. |
delay | int | 0 | 지연 시간(밀리초). |
content | string | 툴팁의 내용. |
메서드
| 메서드 이름 | 설명 |
|---|---|
open() | 툴팁 열기 열 때마다 내용을 수정할 수 있도록 매개변수 전달을 허용합니다. 예: |
close() | 툴팁 닫기 |
toggle() | 툴팁 상태 전환 |
getState() | 툴팁의 상태를 반환합니다. 총 4가지 상태(opening, opened, closing, closed)가 있습니다. |