November 25, 2014

Weebly Tricks #82 - Modern Tooltip Styles

Posted by Domingo Tambasacan at 11/25/2014

Weebly Tooltip Styles


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>

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!



Get email updates and more access! (Free)
Email *
email marketing by activecampaign

About Author:

Hi I am Domz. I love inserting new widgets and effects on Weebly Template. I like helping people and I like them more being my subscriber. Follow me @ Twitter | Facebook



If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to my regular Email Updates. Subscribe Now!

...

4 comments:

  1. 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.

    Any help would be much appreciated.

    ReplyDelete
    Replies
    1. Hi Adam,

      I got your point and I am willing to help you once you post this on our forum. Please include your site address as well.

      Delete
    2. Hey Domz,

      Thanks 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.

      Delete

 

© 2014. All Rights Reserved | My Weebly Tricks | Template by Blogger Widgets

Home | | Privacy Policy | Top