Advertisement
chelseaxsunshine

tooltips

Mar 30th, 2016
55
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. Tooltips tutorial by eruhption (esme)
  2.  
  3. put this code under <head> (NOTE: YOU WILL MOST LIKELY NEED TO RE-TYPE THE "")
  4.  
  5. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script> <script> (function($){ $(document).ready(function(){ $("[title],a[title],img[title]").style_my_tooltips({ tip_follows_cursor:true, tip_delay_time:100, tip_fade_speed:300, attribute:"title" }); }); })(jQuery); </script>
  6.  
  7. <style>
  8.  
  9. #s-m-t-tooltip {
  10.  
  11. max-width:300px; padding:4px 4px 4px 4px; margin:20px 0px 0px 20px; background: #fff; /* change the background color you can change it to transparent too*/
  12.  
  13. border:1px solid #000; /* change the border and its color */
  14.  
  15. font-family: ‘Short Stack’, cursive;/* change the font */
  16.  
  17. font-size:10px; /* change the font size */
  18.  
  19. letter-spacing:0px; /* change the letter spacing */
  20.  
  21. text-transform:lowercase; /* can be none , lowercase or even uppercase!*/ color:#0000; /* change the text color */ z-index:999999999999999999999999999999999999; }
  22.  
  23. </style>
  24.  
  25. now to make the tooltips show up you need to make any links look like this
  26.  
  27. <a href=”LINK” title=”TEXT OF TOOLTIP”>TEXT OF LINK”</a>
  28.  
  29. -esme
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement