Atlast I finished this article for my friend who needs a tooltip on his sentences. Well, added as a bonus, this tooltip is also applicable to images. Again and again, this modern tooltip styles works best on the latest version of modern browsers.
The styles uses SVG and CSS transitions via hover. For proper credit, the images used on the Comic demo are from Random User Generator while icons are from Font Awesome.
FILES NEEDED
How to use these files? Click Here!
HEADER CODE
Where to place these codes? Click Here!
<link href="http://mwtdatabase.weebly.com/files/theme/tostsh.css" rel="stylesheet" type="text/css" />
<style>
.tooltext {
font-size: 25px !important;
font-family: 'Kalam', cursive;
text-align: center;
text-style: italic;
}
</style>
<style>
.tooltext {
font-size: 25px !important;
font-family: 'Kalam', cursive;
text-align: center;
text-style: italic;
}
</style>
Note:
Red text - Change with your site address.
BODY CODE
Where to place these codes? Click Here!
<p style="font-size: 25px !important; font-style: italic !important;" class="tooltext" >A man of my <span class="tooltip tooltip-turnright"><span class="tooltip-item">spiritual</span><span class="tooltip-content"><strong>[spir·it·u·al]</strong> affecting the human spirit or soul as opposed to material or physical things</span></span> intensity does not eat <span class="tooltip tooltip-turnleft"><span class="tooltip-item">corpses</span><span class="tooltip-content"><strong>[corpse]</strong> dead body, body, carcass, skeleton, remains, mortal remains, rotten bacon</span></span>.</p>
Notes:
Yellow text - This is your main sentence.
Blue text - Part of the sentence which contains the tooltip.
Green text - The content of the tooltip.
CONCLUSION
I made two demos, the first one uses the code above while the other uses another code. It cannot be mixed on same page since they have common classes. However, I can insert (upon request and availability) the second demo on your site if you are my subscriber.
Be inspired with these tooltip styles!
Your website is awesome. Thank you so much for all the great tutorials. I used this really great tooltip code, and I got it to work, but for some reason, when this is on my page, it changes the entire page to a light blue color. I just need to keep it white, but am having trouble finding why the color is changing. Any ideas? Also, I wanted to change the text color in the pop up, but for some reason, I try and change the hex color in the tostsh.css but it wont change when I re upload it to the files in my weebly site.
ReplyDeleteAny help would be much appreciated.
Hi Adam,
DeleteI got your point and I am willing to help you once you post this on our forum. Please include your site address as well.
Hey Domz,
DeleteThanks so much. My website is http://sasberp.weebly.com/. As you'll see, the whole page is light blue for some reason.
Thanks again for your help.
Adam please use the forum.
Delete