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