Discover Top Posts Tagged with #hover info

hello! i was wondering if there was a way to do a sort of...unfurl? effect on hovers? i'm doing hover boxes for my friend and their account is fairy tale based so I did a scroll for their background on the boxes and was wondering if instead of having the box come up all at once to have it start top down or middle out or something like that? thank you so much!!!

hi there anon, yes, there are a few ways of doing this, but i think the one fits with what you’ve described is just a simple change to your hover effect…

you’ll probably have opacity effects right now, so the box fades in and out on hover… delete those!

now, make sure to set your content css at ‘height:0px;’ and ‘hide’ the overflow ( see the code in bold text below! ) and then your content ( on hover ) at the height you want – e.g.

#hovercontent { height:0px; overflow-y:hidden; margin-top:10px; width:150px; color:#fff; -webkit-transition: all 0.7s ease; -moz-transition: all 0.7s ease; -o-transition: all 0.7s ease;}

#sidebox:hover #hovercontent { height:200px; overflow-y:scroll; -webkit-transition: all 0.7s ease; -moz-transition: all 0.7s ease; -o-transition: all 0.7s ease;}

**you need to set a fixed height in your hover content for this effect. if you just set the height of your ‘unfurled’ content as auto, the effect won’t work, so try to work out the optimal height for the box ( or code multiple boxes with different heights! ) if you have a lot of content in the box, and don’t want it to take up a huge amount of space on the page, you can also include the ‘overflow-y: scroll;’ ( optional ) so that your content is not cut off!

what you’re doing is just expanding the height of the box on hover and the transition makes sure that it happens gradually ( like an unfurl effect ) rather than changing the opacity!

hope this is what you’re after!? :3

#asks #anon #hover info #mycode #mytutorial

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

[ 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! ]

(function($){ $(document).ready(function(){ $(“a[title]”).style_my_tooltips({ tip_follows_cursor:true, tip_delay_time:90, tip_fade_speed:600, attribute:“title” }); }); })(jQuery);

[ 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!