there are a few tutorials out there around installing and styling hoverlinks - this is a quick run down of how i do it - with credit to the original code and jquery by malihu -- - onward, friend...
usually there are two different kinds of links that you can include on your blog...
1. ‘full links’ - where you have the full word or description of the link on display - like so -
2. ‘hover links’ - where you can have a symbol, or a number, or a roman numeral, or maybe even a letter as the links, and when your visitors hover their mouse over these links, there is a little hover info activated which tells them where the link leads...like so -
or
- so this is a ‘how to’ make the second kind of link ( hover links ) on your blog...
installing the code
the jquery code for tooltips comes from the demo by malihu.
1. up in the top section of your code, you will need to paste three things - make sure this goes into your code ABOVE <style type="text/css">
[ 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 )
#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 can add your hover links to your blog - in your html section you probably already have something like this
if you’re looking for symbols to use - just google ‘tumblr symbols’ for sites which you can just cut and paste from! here’s a couple to get you started... [ x ] [ x ]
voila! hoverlinks -
if this helped at all, a like or reblog would be super lovely - thanks! ♥
NB/ if you copy and paste from this post, you will have to delete and retype all of your quotation marks - tumblr messes up quotations when copying from a post into the html editor!
Hey. First of all, your themes are awesome. :) Second, I'd like to ask something if it's okay. I'm not sure what this is called, the thing where you hover on a link and there'll be something to tell you what that link is about (google say it's called tooltip?). How do you customize them? I notice the js file. Is that yours or you get it somewhere? I found jquery qtip through qoogle but I keep failing at trying it myself. I thought I ask. Sorry about my English. I suck at describing things.
hi there anon, no worries - there are a lot of really nice tutorials out there already for making and customising tooltips on tumblr... check out some of these, they’re p awesome and very helpful. most of these include links to full code including the script and the css you will use to style them :3 hopefully you’ll be up and running with tooltips in no time!
how did you make a picture a link with a hover desc? i have the code to make a picture a link and the code to make a picture have a hover desc but i want it to be both like yours. can you help me out?
are you talking about the “ad” picture on my blog or my friends page bc theyre completely different but its pretty simple really!
just add title like this:
title=”hover desc here” href=”link here”><img src=”img link here”>