Guest User

Untitled

a guest
Jan 18th, 2019
97
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.97 KB | None | 0 0
  1. $(document).mousemove(function (e) {
  2. amouseX = e.pageX - 30;
  3. amouseY = e.pageY + 20;
  4. $(".tooltip").css({ left: amouseX + "px", top: amouseY + "px" });
  5. });
  6.  
  7. dropmenuobj.x = amouseX
  8. dropmenuobj.y = amouseY
  9.  
  10. var disappeardelay=0 //tooltip disappear delay (in miliseconds)
  11. var verticaloffset=0 //vertical offset of tooltip from anchor link, if any
  12. var enablearrowhead=0 //0 or 1, to disable or enable the arrow image
  13. var arrowheadimg=["arrowdown.gif", "arrowup.gif"] //path to down and up arrow images
  14. var arrowheadheight=11 //height of arrow image (amount to reveal)
  15.  
  16. /////No further editting needed
  17. var ie=document.all
  18. var ns6=document.getElementById&&!document.all
  19. verticaloffset=(enablearrowhead)? verticaloffset+arrowheadheight : verticaloffset
  20.  
  21. function getposOffset(what, offsettype){
  22. var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
  23. var parentEl=what.offsetParent;
  24. while (parentEl!=null){
  25. totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
  26. parentEl=parentEl.offsetParent;
  27. }
  28. return totaloffset;
  29. }
  30.  
  31. function showhide(obj, e){
  32. //dropmenuobj.style.left=dropmenuobj.style.top="-500px"
  33. if (e.type=="mouseover")
  34. obj.display="block"
  35. }
  36.  
  37. function iecompattest(){
  38. return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
  39. }
  40.  
  41. function clearbrowseredge(obj, whichedge){
  42. if (whichedge=="rightedge"){
  43. edgeoffsetx=0
  44. var windowedge=ie && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
  45. dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
  46. if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
  47. edgeoffsetx=dropmenuobj.contentmeasure-obj.offsetWidth
  48. if (dropmenuobj.x-edgeoffsetx+dropmenuobj.contentmeasure>windowedge)
  49. edgeoffsetx=dropmenuobj.x-windowedge+dropmenuobj.contentmeasure
  50. return edgeoffsetx
  51. }
  52. else{
  53. edgeoffsety=0
  54. var topedge=ie && !window.opera? iecompattest().scrollTop : window.pageYOffset
  55. var windowedge=ie && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
  56. dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
  57. if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure) //move up?
  58. edgeoffsety=dropmenuobj.contentmeasure+obj.offsetHeight+(verticaloffset*2)
  59. return edgeoffsety
  60. }
  61. }
  62.  
  63. function displayballoontip(obj, e){ //main ballooon tooltip function
  64. if (window.event) event.cancelBubble=true
  65. else if (e.stopPropagation) e.stopPropagation()
  66. if (typeof dropmenuobj!="undefined") //hide previous tooltip?
  67. dropmenuobj.style.display="none"
  68. clearhidemenu()
  69. obj.onmouseout=delayhidemenu
  70. dropmenuobj=document.getElementById(obj.getAttribute("rel"))
  71. showhide(dropmenuobj.style, e)
  72. dropmenuobj.x = amouseX
  73. dropmenuobj.y = amouseY
  74. dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"
  75. dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"
  76. if (enablearrowhead)
  77. displaytiparrow()
  78. }
  79.  
  80. function displaytiparrow(){ //function to display optional arrow image associated with tooltip
  81. tiparrow=document.getElementById("arrowhead")
  82. tiparrow.src=(edgeoffsety!=0)? arrowheadimg[0] : arrowheadimg[1]
  83. var ieshadowwidth=(dropmenuobj.filters && dropmenuobj.filters[0])? dropmenuobj.filters[0].Strength-1 : 0
  84. //modify "left" value depending on whether there's no room on right edge of browser to display it, respectively
  85. tiparrow.style.left=(edgeoffsetx!=0)? parseInt(dropmenuobj.style.left)+dropmenuobj.offsetWidth-tiparrow.offsetWidth-10+"px" : parseInt(dropmenuobj.style.left)+5+"px"
  86. //modify "top" value depending on whether there's no room on right edge of browser to display it, respectively
  87. tiparrow.style.top=(edgeoffsety!=0)? parseInt(dropmenuobj.style.top)+dropmenuobj.offsetHeight-tiparrow.offsetHeight-ieshadowwidth+arrowheadheight+"px" : parseInt(dropmenuobj.style.top)-arrowheadheight+"px"
  88. tiparrow.style.display="block"
  89. }
  90.  
  91. function delayhidemenu(){
  92. delayhide=setTimeout("dropmenuobj.style.display='none'; if (enablearrowhead) tiparrow.style.display='none'",disappeardelay)
  93. }
  94.  
  95. function clearhidemenu(){
  96. if (typeof delayhide!="undefined")
  97. clearTimeout(delayhide)
  98. }
  99.  
  100. function reltoelement(linkobj){ //tests if a link has "rel" defined and it's the ID of an element on page
  101. var relvalue=linkobj.getAttribute("rel")
  102. return (relvalue!=null && relvalue!="" && document.getElementById(relvalue)!=null && document.getElementById(relvalue).className=="tooltip")? true : false
  103. }
  104.  
  105. function initalizetooltip(){
  106. var all_links=document.getElementsByTagName("a")
  107. if (enablearrowhead){
  108. tiparrow=document.createElement("img")
  109. tiparrow.setAttribute("src", arrowheadimg[0])
  110. tiparrow.setAttribute("id", "arrowhead")
  111. document.body.appendChild(tiparrow)
  112. }
  113. for (var i=0; i<all_links.length; i++){
  114. if (reltoelement(all_links[i])){ //if link has "rel" defined and it's the ID of an element on page
  115. all_links[i].onmouseover=function(e){
  116. var evtobj=window.event? window.event : e
  117. displayballoontip(this, evtobj)
  118. }
  119. all_links[i].onmouseout=delayhidemenu
  120. }
  121. }
  122. }
  123.  
  124. if (window.addEventListener)
  125. window.addEventListener("load", initalizetooltip, false)
  126. else if (window.attachEvent)
  127. window.attachEvent("onload", initalizetooltip)
  128. else if (document.getElementById)
  129. window.onload=initalizetooltip
  130.  
  131. $(document).mousemove(function (e) {
  132. amouseX = e.pageX - 30;
  133. amouseY = e.pageY + 20;
  134. $(".tooltip").css({ left: amouseX + "px", top: amouseY + "px" });
  135. });
  136.  
  137. <html>
  138. <head>
  139.  
  140. <script>
  141.  
  142. var divName = 'follower';
  143. var offX = 15;
  144. var offY = 15;
  145.  
  146. function mouseX(evt) {
  147.  
  148. if (!evt) evt = window.event;
  149. if (evt.pageX) {
  150.  
  151. return evt.pageX;
  152.  
  153. }
  154. else if (evt.clientX) {
  155.  
  156. return evt.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
  157.  
  158. }
  159. else {
  160.  
  161. return 0;
  162.  
  163. }
  164.  
  165. }
  166.  
  167. function mouseY(evt) {
  168.  
  169. if (!evt) {
  170.  
  171. evt = window.event;
  172. if (evt.pageY) {
  173.  
  174. return evt.pageY;
  175.  
  176. }
  177.  
  178. }
  179. else if (evt.clientY) {
  180.  
  181. return evt.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
  182.  
  183. }
  184. else {
  185.  
  186. return 0;
  187.  
  188. }
  189.  
  190. }
  191.  
  192. function follow(evt) {
  193.  
  194. if (document.getElementById) {
  195.  
  196. var obj = document.getElementById(divName).style; obj.visibility = 'visible';
  197. obj.left = (parseInt(mouseX(evt))+offX) + 'px';
  198. obj.top = (parseInt(mouseY(evt))+offY) + 'px';
  199.  
  200. }
  201.  
  202. }
  203.  
  204. </script>
  205.  
  206. <style>
  207.  
  208. #follower {
  209. position:absolute;
  210. overflow:hidden;
  211. visibility: hidden;
  212. z-index:999;
  213. width:100px;
  214. height:100px;
  215. background-color:#ccc;
  216. color: #000;
  217. }
  218.  
  219. .item {
  220.  
  221. color: #000;
  222. font-weight: bold;
  223. cursor: pointer;
  224.  
  225. }
  226.  
  227. </style>
  228.  
  229. </head>
  230. <body>
  231.  
  232. <div class="item" onclick="follow(event); document.onmousemove = follow;">
  233. click me for tooltip
  234. </div>
  235.  
  236. <div id="follower">
  237. Hey I am a shadow!
  238. </div>
  239.  
  240. </body>
  241. </html>
  242.  
  243. $(document).mousemove(function (e) {
  244. amouseX = e.pageX - 30;
  245. amouseY = e.pageY + 20;
  246. $(".tooltip").css({ left: amouseX + "px", top: amouseY + "px" });
  247. });
Add Comment
Please, Sign In to add comment