Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- $(document).mousemove(function (e) {
- amouseX = e.pageX - 30;
- amouseY = e.pageY + 20;
- $(".tooltip").css({ left: amouseX + "px", top: amouseY + "px" });
- });
- dropmenuobj.x = amouseX
- dropmenuobj.y = amouseY
- var disappeardelay=0 //tooltip disappear delay (in miliseconds)
- var verticaloffset=0 //vertical offset of tooltip from anchor link, if any
- var enablearrowhead=0 //0 or 1, to disable or enable the arrow image
- var arrowheadimg=["arrowdown.gif", "arrowup.gif"] //path to down and up arrow images
- var arrowheadheight=11 //height of arrow image (amount to reveal)
- /////No further editting needed
- var ie=document.all
- var ns6=document.getElementById&&!document.all
- verticaloffset=(enablearrowhead)? verticaloffset+arrowheadheight : verticaloffset
- function getposOffset(what, offsettype){
- var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
- var parentEl=what.offsetParent;
- while (parentEl!=null){
- totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
- parentEl=parentEl.offsetParent;
- }
- return totaloffset;
- }
- function showhide(obj, e){
- //dropmenuobj.style.left=dropmenuobj.style.top="-500px"
- if (e.type=="mouseover")
- obj.display="block"
- }
- function iecompattest(){
- return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
- }
- function clearbrowseredge(obj, whichedge){
- if (whichedge=="rightedge"){
- edgeoffsetx=0
- var windowedge=ie && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
- dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
- if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
- edgeoffsetx=dropmenuobj.contentmeasure-obj.offsetWidth
- if (dropmenuobj.x-edgeoffsetx+dropmenuobj.contentmeasure>windowedge)
- edgeoffsetx=dropmenuobj.x-windowedge+dropmenuobj.contentmeasure
- return edgeoffsetx
- }
- else{
- edgeoffsety=0
- var topedge=ie && !window.opera? iecompattest().scrollTop : window.pageYOffset
- var windowedge=ie && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
- dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
- if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure) //move up?
- edgeoffsety=dropmenuobj.contentmeasure+obj.offsetHeight+(verticaloffset*2)
- return edgeoffsety
- }
- }
- function displayballoontip(obj, e){ //main ballooon tooltip function
- if (window.event) event.cancelBubble=true
- else if (e.stopPropagation) e.stopPropagation()
- if (typeof dropmenuobj!="undefined") //hide previous tooltip?
- dropmenuobj.style.display="none"
- clearhidemenu()
- obj.onmouseout=delayhidemenu
- dropmenuobj=document.getElementById(obj.getAttribute("rel"))
- showhide(dropmenuobj.style, e)
- dropmenuobj.x = amouseX
- dropmenuobj.y = amouseY
- dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"
- dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"
- if (enablearrowhead)
- displaytiparrow()
- }
- function displaytiparrow(){ //function to display optional arrow image associated with tooltip
- tiparrow=document.getElementById("arrowhead")
- tiparrow.src=(edgeoffsety!=0)? arrowheadimg[0] : arrowheadimg[1]
- var ieshadowwidth=(dropmenuobj.filters && dropmenuobj.filters[0])? dropmenuobj.filters[0].Strength-1 : 0
- //modify "left" value depending on whether there's no room on right edge of browser to display it, respectively
- tiparrow.style.left=(edgeoffsetx!=0)? parseInt(dropmenuobj.style.left)+dropmenuobj.offsetWidth-tiparrow.offsetWidth-10+"px" : parseInt(dropmenuobj.style.left)+5+"px"
- //modify "top" value depending on whether there's no room on right edge of browser to display it, respectively
- tiparrow.style.top=(edgeoffsety!=0)? parseInt(dropmenuobj.style.top)+dropmenuobj.offsetHeight-tiparrow.offsetHeight-ieshadowwidth+arrowheadheight+"px" : parseInt(dropmenuobj.style.top)-arrowheadheight+"px"
- tiparrow.style.display="block"
- }
- function delayhidemenu(){
- delayhide=setTimeout("dropmenuobj.style.display='none'; if (enablearrowhead) tiparrow.style.display='none'",disappeardelay)
- }
- function clearhidemenu(){
- if (typeof delayhide!="undefined")
- clearTimeout(delayhide)
- }
- function reltoelement(linkobj){ //tests if a link has "rel" defined and it's the ID of an element on page
- var relvalue=linkobj.getAttribute("rel")
- return (relvalue!=null && relvalue!="" && document.getElementById(relvalue)!=null && document.getElementById(relvalue).className=="tooltip")? true : false
- }
- function initalizetooltip(){
- var all_links=document.getElementsByTagName("a")
- if (enablearrowhead){
- tiparrow=document.createElement("img")
- tiparrow.setAttribute("src", arrowheadimg[0])
- tiparrow.setAttribute("id", "arrowhead")
- document.body.appendChild(tiparrow)
- }
- for (var i=0; i<all_links.length; i++){
- if (reltoelement(all_links[i])){ //if link has "rel" defined and it's the ID of an element on page
- all_links[i].onmouseover=function(e){
- var evtobj=window.event? window.event : e
- displayballoontip(this, evtobj)
- }
- all_links[i].onmouseout=delayhidemenu
- }
- }
- }
- if (window.addEventListener)
- window.addEventListener("load", initalizetooltip, false)
- else if (window.attachEvent)
- window.attachEvent("onload", initalizetooltip)
- else if (document.getElementById)
- window.onload=initalizetooltip
- $(document).mousemove(function (e) {
- amouseX = e.pageX - 30;
- amouseY = e.pageY + 20;
- $(".tooltip").css({ left: amouseX + "px", top: amouseY + "px" });
- });
- <html>
- <head>
- <script>
- var divName = 'follower';
- var offX = 15;
- var offY = 15;
- function mouseX(evt) {
- if (!evt) evt = window.event;
- if (evt.pageX) {
- return evt.pageX;
- }
- else if (evt.clientX) {
- return evt.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
- }
- else {
- return 0;
- }
- }
- function mouseY(evt) {
- if (!evt) {
- evt = window.event;
- if (evt.pageY) {
- return evt.pageY;
- }
- }
- else if (evt.clientY) {
- return evt.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
- }
- else {
- return 0;
- }
- }
- function follow(evt) {
- if (document.getElementById) {
- var obj = document.getElementById(divName).style; obj.visibility = 'visible';
- obj.left = (parseInt(mouseX(evt))+offX) + 'px';
- obj.top = (parseInt(mouseY(evt))+offY) + 'px';
- }
- }
- </script>
- <style>
- #follower {
- position:absolute;
- overflow:hidden;
- visibility: hidden;
- z-index:999;
- width:100px;
- height:100px;
- background-color:#ccc;
- color: #000;
- }
- .item {
- color: #000;
- font-weight: bold;
- cursor: pointer;
- }
- </style>
- </head>
- <body>
- <div class="item" onclick="follow(event); document.onmousemove = follow;">
- click me for tooltip
- </div>
- <div id="follower">
- Hey I am a shadow!
- </div>
- </body>
- </html>
- $(document).mousemove(function (e) {
- amouseX = e.pageX - 30;
- amouseY = e.pageY + 20;
- $(".tooltip").css({ left: amouseX + "px", top: amouseY + "px" });
- });
Add Comment
Please, Sign In to add comment