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 ;
hello there anon -
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…
installing the code
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 <style type=“text/css”>
[ 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! ]
[ 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 <style type=“text/css”> and </style></head> 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 )
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 */
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