반응형
jQuery를 사용하여 마우스 오버시 툴팁 메시지를 어떻게 표시 할 수 있습니까?
제목에서 알 수 있듯이 jQuery를 사용하여 마우스 오버시 도구 설명 메시지를 어떻게 표시 할 수 있습니까?
도구 설명 플러그인은 필요한 작업에 비해 너무 무거울 수 있습니다. 툴팁에 표시 할 텍스트로 '제목'속성을 설정하기 만하면됩니다.
$("#yourElement").attr('title', 'This is the hover-over text');
jQuery Tooltip 플러그인을 살펴보십시오 . 다른 옵션에 대한 옵션 객체를 전달할 수 있습니다.
다른 대체 도구 설명 플러그인도 사용할 수 있으며 그중 몇 개는
데모 및 문서를 살펴보고 코드에서 사용하는 방법에 대한 구체적인 질문이있는 경우 질문을 업데이트하십시오.
다음은 매력처럼 작동합니다 (div / span / table / tr / td / etc가 있다고 가정 "id"="myId"
)
$("#myId").hover(function() {
$(this).css('cursor','pointer').attr('title', 'This is a hover text.');
}, function() {
$(this).css('cursor','auto');
});
무료로 .css('cursor','pointer')
마우스 오버시 마우스 포인터를 변경합니다.
권장되는 qTip 및 기타 프로젝트는 매우 오래 되었으므로 최신 버전이므로 qTip2 를 사용하는 것이 좋습니다 .
부트 스트랩 도구 설명을 사용할 수 있습니다 . 초기화하는 것을 잊지 마십시오.
<span class="tooltip-r" data-toggle="tooltip" data-placement="left" title="Explanation">
inside span
</span>
왼쪽에 설명 텍스트가 표시됩니다.
js로 실행하십시오.
$('.tooltip-r').tooltip();
ToolTipster 살펴보기
- 사용하기 쉬운
- 융통성 있는
- 다른 툴팁 플러그인 (39kB)에 비해 매우 가볍습니다.
- 추가 스타일링없이 더 좋아 보인다
- 미리 정의 된 테마 세트가 있습니다.
jQiuery를 사용하지 않고 CSS 만 사용하여 할 수 있습니다.
<a class="tooltips">
Hover Me
<span>My Tooltip Text</span>
</a>
<style>
a.tooltips {
position: relative;
display: inline;
}
a.tooltips span {
position: absolute;
width: 200px;
color: #FFFFFF;
background: #000000;
height: 30px;
line-height: 30px;
text-align: center;
visibility: hidden;
border-radius: 6px;
}
a.tooltips span:after {
content: '';
position: absolute;
top: 100%;
left: 35%;
margin-left: -8px;
width: 0;
height: 0;
border-top: 8px solid #000000;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
a:hover.tooltips span {
visibility: visible;
opacity: 0.8;
bottom: 30px;
left: 50%;
margin-left: -76px;
z-index: 999;
}
</style>
반응형
'developer tip' 카테고리의 다른 글
그래프에서 뚜렷하게 다른 RGB 색상 생성 (0) | 2020.10.11 |
---|---|
버튼의 PNG 색상 변경-iOS (0) | 2020.10.11 |
JPA / EJB 코드와 함께 "오류를 지속하기 위해 전달 된 분리 된 엔티티" (0) | 2020.10.11 |
245px에서 "px"를 삭제하는 방법 (0) | 2020.10.11 |
mvc4 razor의 텍스트 상자에 숫자 만 허용하는 방법 (0) | 2020.10.11 |