Hovering For More

simple // ur most basic layout tutorials thread

The title itself is pretty self-explanatory already so...
let's start?

I've been seeing a lot of shops do this for a while now and after struggling for a bit (orz), I have figured out how to hover something for more information.
The only thing you really need to learn in this tutorial is the attribute (refer to "Important HTML Words") 'title'.
I will be showing three examples.

*Do not forget to remove spaces after every "<" and before every ">" in examples in order for them to work properly.

Example:
< p >
< span style="font-family: times new roman; font-size: 70px; color: #4f4f4f;"/ >•< /span >
< /p >

As you can see, when you hover the circle above, there's nothing that pops up.

Example:
< p >
< span style="font-family: times new roman; font-size: 70px; color: #4f4f4f;" title="add something here"/ >•< /span >
< /p >


Now when you hover it, there'll be something there. Just add whatever you want inside the quotes after th'title' attribute and you'll be able to see it when hovering the certain object.

Example 2:
< p >
< img src="
http://i1307.photobucket.com/albums/s587/MagicalDreams1/PNGs/MissACropped_zpsdc8f78f8.png" style="height: 167px; width: 200px;"/ >< /p >

MissACropped_zpsdc8f78f8.png
Same thing as before. When hovering it, there's nothing.

Example:
< p >
< img src="
http://i1307.photobucket.com/albums/s587/MagicalDreams1/PNGs/MissACropped_zpsdc8f78f8.png" style="height: 167px; width: 200px;" title="miss a"/ >< /p >

MissACropped_zpsdc8f78f8.png

Example 3:
< p >
< span style="font-family: times new roman; font-size: 12px; color: #96B6E8;"/ >insert text here< /span >< /p >

insert text here

There's no need to explain any further.

Example:
< p >
< span style="font-family: times new roman; font-size: 12px; color: #96b6e8;"/ >insert 
< span title="add what you want to say here or whatever"/ >text< /span > here< /span >< /p >

insert text here

Hover the word "text" to see the 'message'.

Basically, I made 3 examples so that I wouldn't be getting questions like, "does this work for pictures?" or something along those lines and the last tutorial was to show that you can apply this to only one word if you want to. You just have to end it when you want it to end.

Like this story? Give it an Upvote!
Thank you!

Comments

You must be logged in to comment
starfan24
#1
Chapter 13: ⋆。°✩Reader Comment⋆。°✩

Hi author -esque!!

Love this tutorial!! Thank you so much!!

Reader
⋆。°✩starfan24⋆。°✩
Krystal_Luu
#2
Thank you for creating this!!!!
godna24
#3
Chapter 38: hi erm i wanna ask is it possible to use background image instead of background color in the scroll box?
Mael517 #4
Chapter 32: Thank you; this was very helpful!
sikakira
#5
Chapter 18: I wish text shadow worked :((((
Sakarafreak
#6
Chapter 7: Im still confused on the strikethrough..
Dark_History45 #7
Chapter 23: how to change the background image?
Jisoori #8
Chapter 8: why do i have this 'lorem ipsum dolor sit amet' on my preview?