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
