그걸로 뭘 할 수 있겠어?
배치 제어
툴팁 텍스트를 작성한 다음 버블이 나타나는 위치를 선택하십시오: 상단,하단, 왼쪽,오른쪽, 플러스 시작 및 끝 변형. X 및 Y 픽셀 오프셋으로 미세 조정하여 버블이 설명하는 내용을 절대 다루지 않도록하십시오.
- 질문이 나오는 바로 그 곳에서 양식 필드, 가격 또는 전문 용어를 설명하십시오.
- 오프셋으로 버블을 고정하여 메뉴, 끈적한 헤더 및 근처 버튼을 지웁니다.
- 짧은 문맥 힌트가 포함된 다단계 양식을 통해 사용자를 안내합니다.
스타일링: 정상 및 호버 상태
트리거와 버블을 별도로 디자인합니다. 배경,텍스트 색상,타이포그래피, 패딩,경계 반경,경계, 상자 그림자를 설정합니다. 각 속성은 일반 상태와 호버 상태에 대해 독립적인 컨트롤을 갖습니다.
- 회색 브라우저 기본값으로 생활하는 대신 브랜드 색상을 정확하게 일치시키세요.
- 상황에 따라 힌트를 미묘하게(유령 윤곽) 또는 크게(그림자가 있는 단단한 알약) 만드세요.
- 스타일 호버 피드백을 통해 사용자는 요소가 대화형임을 알 수 있습니다.
트리거 및 애니메이션
빠른 힌트를 위해 호버에 트리거하거나 터치 스크린에서 더 잘 작동하는 영구 노트를 위해 클릭하십시오. 입구 애니메이션,제어 기간 및 숨기기-지연을 추가하여 툴팁이 거슬리는 대신 부드럽게 느껴지도록 합니다.
- 데스크탑 마이크로카피용 호버링; 모바일 친화적인 영구 힌트를 보려면 클릭하세요.
- 미묘한 페이드 또는 스케일 입구는 사용자를 성가시게 하지 않고 눈을 끌게 합니다.
- 숨기기 지연은 커서가 지나갈 때 도구 설명이 깜박이는 것을 방지합니다.
요소 또는 확장: 어떤 것이 필요합니까?
이 페이지 (도구팁 요소): 페이지에 새로운 힌트를 추가해야 합니다. 자체 트리거 텍스트나 아이콘이 제공됩니다.
도구 설명 확장: 이미 버튼, 이미지 또는 제목이 있으며 커서 따르기 모드를 포함하여 도구 설명을 첨부하려고 합니다.
일반적인 사용 사례
- 양식: “비밀번호는 입력 옆에 12+ 문자가 필요합니다”, 양식을 길게하지 않고.
- 가격표: “좌석당”과 “작업 공간당”을 인라인으로 정의합니다.
- 버튼: 클릭 후 무슨 일이 일어나는지 명확히 합니다(“카드 필요 없음”).
- 팀/목록: 역할, 약력 조각 또는 호버링 시 연락처 바로가기.
- 온보딩: 새로운 기능이나 대시보드 위젯 옆에 있는 짧은 지침입니다.
어떻게 추가하나요?
- 위젯을 놓습니다. Elementor 에서 Master Addons 아래에서 “도구 설명”을 검색하고 힌트가 속한 곳으로 드래그하십시오.
- 쓰고 놓습니다. tooltip 텍스트를 입력하고 트리거 (호버 또는 클릭) 를 설정하고 배치 및 오프셋을 선택합니다.
- 스타일 지정하기. 스타일 탭에서 Normal 및 Hover 상태를 디자인합니다: 색상,타이포그래피, 반경,그림자. 게시.
툴팁에 대해 자주 묻는 질문
Tooltip 요소는 무엇을 위한 것인가요?
레이아웃을 어지럽히지 않고 짧고 도움이 되는 컨텍스트 추가: 필드 설명, 용어 정의, 버튼 설명, 인라인 지침 요청 시 도움이 되는 필수적이지 않은 모든 것.
Tooltips 확장 프로그램과 어떻게 다른가요?
요소는 자체 트리거가 있는 독립 실행형 위젯입니다. The 확장 기존 위젯,섹션 또는 컨테이너에 툴팁을 첨부하고 커서 따르기 모드를 추가합니다. 새로운 힌트 스팟 필요: 요소를 사용하십시오. 페이지에 이미 있는 항목에 대한 툴팁 필요: 확장자를 사용하십시오.
노멀 상태와 호버 상태를 별도로 스타일링할 수 있나요?
예. 스타일 탭에는 배경,텍스트, 테두리,반경 및 그림자에 대한 독립적인 Normal 및 Hover 컨트롤이 있습니다.
거품이 나타나는 곳을 어떻게 제어하나요?
배치 사전 설정(상단, 하단, 왼쪽, 오른쪽, 시작 및 끝 변형 포함)을 사용한 다음 X 및 Y 오프셋을 픽셀 단위로 사용하여 넛지합니다.
호버링 또는 클릭: 어떤 트리거를 사용해야 합니까?
빠른 데스크톱 힌트를 보려면 마우스를 가져가세요; 모바일에는 호버가 존재하지 않기 때문에 터치 스크린에서 작동해야 하는 모든 것을 클릭하세요.
내 사이트 속도가 느려지나요?
아니요. 페이지에 있을 때 자체 작은 CSS 와 JS 만 로드합니다. 페이지당 몇 가지 도구 설명이 눈에 띄는 영향을 미치지 않습니다.
트렌드 엘리먼트 위젯 및 확장
더 짧은 시간에 정교한 웹사이트를 구축하세요.
