hello, moosey I hate to be a bother but do you know how people manage to get their post info to hover when you move over a symbol? Like when it tells you: who you reblogged the post from, if they'd like to reblog it, the date and time they posted it, etc? Thank you very much because i've been looking everywhere and can never find it ; W ;
settle in and get comfy - itâs tutorial time⌠XD
okay, what youâre actually using for the hover information is actually something called a âtooltipâ.  where you can have a link as an icon or a symbol, a letter or even an image, and the information is shown on hover - itâs the exact same code people use for hoverlinks.  most people use the tooltips by malihu and thatâs what iâll be using hereâŚÂ
the jquery code for tooltips comes from the demo by malihu ( definitely check out their page! ).
1. up in the top section of your code, you will need to paste three things - make sure these go into your code ABOVE
[ the minimum jquery required to run this script from google ]
[ the âstyle my tooltipsâ js file from malihu ( which iâve uploaded for you, so you donât need to do it again⌠you can always upload your own version into the theme assets area if you like! ]
<br>(function($){<br>$(document).ready(function(){<br>$(âa[title]â).style_my_tooltips({<br>tip_follows_cursor:true,<br>tip_delay_time:90,<br>tip_fade_speed:600,<br>attribute:âtitleâ<br>});<br>});<br>})(jQuery);<br>
[ the script for actually calling the tooltips from malihu ]
change the delay time and the fade speed to suit your preferences⌠( in milliseconds O_O )  the original code has been changed from â[title]â to âa[title]â so that it works on links and not just textâŚ
2. in the next section of your code ( the css bit which is mostly orange and yellow ) - between and paste the next bit of code - this is how your hover information will be styled ( iâve added some extra to help explain the styling XD )
#s-m-t-tooltip { Â max-width:300px; Â border-radius: 0px; /* you can add in a border radius here for curved corners if you like */ Â padding:4px; /* space around the text */ Â margin:5px 10px 5px 0px; /* positioning of your hover info in relation to the link */ Â color:#fff; /* text color */ Â border:1px solid #fff; /* optional border and border color */ Â font-family: âFjalla Oneâ, sans-serif; /* iâve added a custom font in here but you can remove this line if you donât use custom fonts */ Â font-size:10px; /* font size of your hover info */ Â letter-spacing:2px; /* optional letter spacing */ Â background:#000; /* change the background color of your hover info */ Â z-index:99999;}
3. now you will need to add the tooltips to your post information. ( this is the slightly tricky part, depending on your theme! ) - post information will be coded into both your css and html, and theme makers often use a wide variety of things to refer to it - things like âinfoâ or âdateâ or âpermaâ - depending on how they design their codeâŚÂ
basically, what youâre looking for in your theme is the information down at the bottom of the html with the code for date/via/source/notes etc.
iâll use a sample theme to help⌠if i scroll down to that section in my theme you can see itâs under the css section âinfoâ -Â
this is my âinfoâ css;
and this is what my post info/notes/tags look like currently
to begin, weâre going to turn each of those links into a symbol and add in the information for the tooltip to the right place⌠ anything that appears in the âtitleâ section of a link will be the hover information on your tooltip. Â
please see below - each section of info has been moved into the âtitleâ portion of the link and the link itself has been replaced with a symbol.  ( thereâs no âreblogâ option in this theme, but you can always add one in to yours! )
this is what my info section looks like now with the hover tooltip for each symbol;
you can move your tags into another section, below the post info or elsewhere - i wouldnât recommend moving your tags into a tooltip though, as you can only show what tags are there, but you arenât able to click on themâŚ
this is with my tags moved out of the âinfoâ div ( just below ) - then some fancy schmancy stuffs like adding a background and a border to the info section in the css ( as well as making the font a little bigger for my symbols ).  you could also add a css section to style your tags if you like!
if you find this helpful, a like or reblog is always appreciated! :3