--> Create Shortcode For CSS3 Tooltip in Blogger! | Experience Lab - Online business creation and development guide for bloggers and startups

Create Shortcode For CSS3 Tooltip in Blogger!

CSS3 Tooltips are Fancy balloons or boxes that are used to show your blog readers some extra information on mouse hover. They can be used in...

shortcode for CSS3 TooltipCSS3 Tooltips are Fancy balloons or boxes that are used to show your blog readers some extra information on mouse hover. They can be used in different ways for example, to provide captions for images, or longer descriptions for hyperlinks, or any useful info by simply hovering over the element containing the tooltip class. Thanks to Blogger Shortcode Plugin now you can create colorful animated Tooltips to enhance your blogspot user interface. This new Shortcode for Tooltip will help you display balloons at top or bottom of your hyperlinks on mouse hover. You can add them inside your blog posts, widgets and even inside your blog comments! You will also be able to display Images inside the tooltip box and display a custom message using HTML. See the demo first!

1. Install Blogger Shortcode Plugin

In order to use Tooltip shortcode you must first install the shortcode plugin for your blogspot blog by following 7 easy steps shared on the link below:

Skip installing it if you have already added it in your blogspot template

2. Add ToolTip Color Theme Skins

I have created two theme skins for the tooltips. One is yellow and second is with black background. You can customize the tooltip background colors as per your choice by following the instructions below:

1 Go To Blogger > Template > Backup your Template

2 Click "Edit HTML"

3 Search for this code ]]></b:skin>

4 Paste the following Code just above it

/*------ CSS3 Tooltip Shortcode -------------*/
.tooltip{outline:none;text-decoration:none!important;border-bottom:2px dotted #0080ff;position:relative}.tooltip:hover {border-bottom: none;}.tooltip strong{line-height:30px}.tooltip > span{max-width:300px;width:290px;padding:10px 20px;opacity:0;bottom:170%;margin-left:-120px;visibility:hidden;z-index:10;position:absolute;font-family:Arial;font-size:12px;font-style:normal;border-radius:2px;box-shadow:2px 2px 5px #999;-webkit-transition-property:opacity,margin-top,visibility,margin-left;-webkit-transition-duration:0.4s,0.3s,0.4s,.3s;-webkit-transition-timing-function:ease-in-out,ease-in-out,ease-in-out,ease-in-out;transition-property:opacity,margin-top,visibility,margin-left;transition-duration:0.4s,0.3s,0.4s,.3s;transition-timing-function:ease-in-out,ease-in-out,ease-in-out,ease-in-out}.tooltip > span img{float:right;width:110px;margin:0 0 30px 10px;padding: 0;border: none;}.tooltip:hover > span{opacity:1;text-decoration:none;visibility:visible;overflow:visible;display:inline;margin-left:-90px}.tooltip span b{width:15px;height:15px;margin-left:20px;bottom:-9px;display:block;position:absolute;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);display:none\0/;*display:none}.tooltip > span{color:#fff;background:#222222 url(http://test.stcnetwork.org/wp-content/themes/swag/assets/images/patterns/overlay2-20.png);border:1px solid #ffffff}.tooltip span b{background:#222222 url(http://test.stcnetwork.org/wp-content/themes/swag/assets/images/patterns/overlay2-20.png);border-bottom:1px solid #ffffff;border-left:1px solid #ffffff} .tooltip:before {content: "\f05a";font-family: FontAwesome;padding:0px 5px;}
.tooltip > span{background:orange;border:1px solid #ff0}.tooltip span b{margin-top:-19px;top:10px;background:orange;border-top:1px solid #ff0;border-right:1px solid #ff0;border-bottom:1px solid orange;border-left:1px solid orange}


Make these Customizations if you want:

By Default the tooltip background is black and it pops up at the top of the hyperlink. If you want to display the tooltip at the bottom of the link instead then make this simple change to the CSS code above:

yellow theme tooltip

  • Replace bottom with Top
  • Remove the yellow highlighted symbols /*   and this */
  • To change the orange background replace orange with a color of your choice or its hexadecimal code. Replace it 4 times
  • To change the border color of the orange tooltip replace ff0 with a hexadecimal color code of your choice. Replace it 3 times

Tip: Use our Color Code Generator to pick colors of your choice.

If you like to change background colors of the black tooltip then follow these steps:

black theme for tooltip

  • To change the black background replace 222222  with the hexadecimal color code of your choice.
  • To change the border color replace ffffff with your prefered hexadecimal color code
  • To change the color of the dotted underline that appears below link then replace 0080ff with your color code.

5 Save your template and all done!

Finally add Tooltips Shortcode

Now whenever you wish to add some information to a link then use the shortcode in this format

[tooltip url="ADD LINK HERE" title="ADD TITLE HERE"]Add HTML Text Here[/tooltip]

Lets create a simple tooltip with title "Blogger Shortcode Plugin"  as shown below:

[tooltip url="http://www.mybloggertricks.com/2015/04/blogger-shortcode-plugin.html" title="Blogger Shortcode Plugin"]
Blogger Shortcodes is a Plugin developed by STCnetwork.org that helps bloggers embed widgets and tools anywhere in blogger with
a simple one line code




Tooltip with Text


Now lets create a tooltip which contains a header, some description and an image. You will create the shortcode in this format:

[tooltip url="http://www.mybloggertricks.com/2015/04/blogger-shortcode-plugin.html" title="Blogger Shortcode Plugin"]
<strong><u>What is Blogger Shortcode Plugin?</u></strong><br/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiunfF-zesyxUChGpx189_TU1bRlurvynLKHe7s5j537EMXqD2cm8YOaRllRs8LGaj0bW-SQpzz0KerroVn7k7z7wmClhKSqBKsUbC8l2NIR3b4pw2KIpS7vytukKmaTsVwYk0XwMnM8ll1/?imgmax=800">
Blogger Shortcodes is a Plugin developed by STCnetwork.org that helps bloggers embed widgets and tools anywhere in blogger with
a simple one line code


You can insert any html (except a hyperlink) inside the tooltips square braces.


Tooltip with image and headline

That's it! Have fun adding any stuff to the tooltip box :)

Update: An info Icon has been added that will prompt readers that the link contains some info.

Need Help?

This shortcode was developed based on the User request posted by Shivansh on our forum. You can also request us to create a shortcode of your choice.

Do let us know if you need any help if needed. I hope this new shortcode may add a new life to your blogspot blogs. Peace and blessings buddies! =)



Affiliate Marketing,12,Announcement,34,Bing,9,Bitcoin,38,blog,7,Blogger Resources,42,Blogger Templates,4,blogger tricks,156,Blogging ethics,70,Blogging tips,198,Bugs and Errors,34,Business,9,Copyright Violation,9,CSS and HTMLTricks,95,Designs,8,drop down menu,7,eBook,12,Email Marketing,7,Events,30,Facebook,30,Facebook tricks,49,Google,157,Google AdSense,42,Google Analytics,7,Google Plus,51,Google Plus Tricks,38,Guest Posts,112,home,2,How To,77,Internet,1,JSON Feeds,25,Kitchen Recipes,2,Label Based Sitemap Themes,1,Make Money Online,108,Marketing,16,MBT Blogger Templates,7,Menus,1,News,146,Pages,1,Posts,10,presentations,15,Responsive,10,Reviews,7,SEO,307,Settings,6,Shortcode,15,Sitemap Themes,1,Social Media,155,Technology,7,Templates,1,Tips,2,Tools,1,Traffic Tips,80,Video,19,Web Designing,62,web hosting,18,Webmaster Tools,97,Widgets,199,wordpress,26,
Experience Lab - Online business creation and development guide for bloggers and startups: Create Shortcode For CSS3 Tooltip in Blogger!
Create Shortcode For CSS3 Tooltip in Blogger!
Experience Lab - Online business creation and development guide for bloggers and startups
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy