간단한 jquery CSS를 사용하여 사용자 정의 태그 제목 프롬프트를 생성합니다. tooltip_HTML/Xhtml_web 페이지 제작

소개

간단한 jquery CSS를 사용하여 브라우저의 기본 동작을 대체하는 사용자 정의 태그 제목 프롬프트를 만듭니다. 그림과 같이:



Javascript 코드

코드 복사

code 다음과 같습니다:

$(function() { 
$("a[title ]").each(function() { 
var a = $(this); 
var title = a.attr('title'); 
if (title == 정의되지 않음 || title == "") return ; 
a.data('title', title) 
.removeAttr('title') 
.hover( 
function () { 
var offset = a.offset (); 
$("
").appendTo($("body")).html(title).css({ top: offset.top a.outerHeight( ) 10, 왼쪽: offset.left a.outerWidth() 1 }).fadeIn(function () { 
var pop = $(this); 
setTimeout(function () { pop.remove (); } , pop.text().length*80); 
}, 
function() { $("#anchortitlecontainer").remove() ; ); 
}); 
}) 


JQuery를 인용하는 것을 잊지 마세요. 

코드의 setTimeout(function () { pop.remove(); }, pop.text().length*80); 제목 프롬프트가 너무 짧지 않도록 제목 길이를 기준으로 프롬프트 시간을 계산합니다. . 길거나 너무 긴 제목 프롬프트는 너무 짧습니다.

CSS 코드

코드 복사코드는 다음과 같습니다.

# 앵커 제목 컨테이너 {

위치: 절대;
z-색인: 5999;
테두리: 단색 1px #315B6C; 패딩: 5px
배경 : 없음 반복 스크롤 0 0 #FFFFFF;
경계 반경: 5px;
표시: 없음
}
#anchortitlecontainer:before {
위치: 절대: 자동; ;
왼쪽: -1px;
테두리 색상: 투명 투명 #315B6C;테두리 스타일:
테두리 너비: 15px; >내용: "";
디스플레이: 블록;
너비: 0;
}
#anchortitlecontainer:after {
하단: 자동; : 0px;
상단: -13px;
테두리 색상: 투명 투명 #FFFFFF; 테두리 스타일: 솔리드
테두리 너비:
내용: "";
display: block;
width: 0;
}


이미지 사용을 방지하려면 일부 CSS3 기능을 사용하세요.

저는 CSS 전문가가 아니기 때문에 이 스타일을 조정하는 데 시간이 좀 걸렸습니다. 누군가가 사용할 수 있다면 영광입니다. :)