Home > Web Front-end > JS Tutorial > ToolTips JQEURY plug-in simple prompt box effect_jquery

ToolTips JQEURY plug-in simple prompt box effect_jquery

WBOY
Release: 2016-05-16 17:59:22
Original
1450 people have browsed it

Originally I wanted to use some ready-made plug-ins, but I found a few that were quite complicated. I just wanted to achieve a small effect that didn't need to be too complicated, so I finally planned to write one myself!

Implementation effect: Place the mouse on the text, and a small prompt box will appear!

Screenshot of the effect:


Test results: Firefox, IE6/7/8 are passed below That’s it! Expert advice is welcome!
 Code

Copy code The code is as follows:
(function($){
$.fn.JNToolTips=function(){
var div = document.createElement("div");
div.style.cssText = 'width:300px; line-height:25px; border:solid 1px #F3A007; background-color:#FBE6BD; padding:5px 10px; font-size:12px;position:absolute'
div.onclick=function(){$(div).remove();};
$(this).mouseover(function(e){
if(!e){e=window.event;}
div.innerHTML= $(this).attr("title");
$(this).attr("title","");
var doc = document.documentElement ? document.documentElement : document.body;
div.style.left=(e.clientX doc.scrollLeft 5 ) "px";
div.style.top=(e.clientY doc.scrollTop 5) "px";
document.body.appendChild(div);
}).mouseout(function() {
$(this).attr("title",div.innerHTML);
$(div).remove();
});
}
})(jQuery) ;

Usage:

Copy code The code is as follows:
$(document).ready(function(){
$("a").JNToolTips();
});

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template