How To Install Css Tool Tip In Blogger Template

HOW TO INSTALL CSS TOOL TIP IN BLOGGER TEMPLATE

Do you realize what is Tool Tip? You may have found in sites or blog when you move mouse over a component symbol then little popup box show up with additional information and after when you slide your transition to anyplace the popup box vanish that is called Tool tip.Today in this article we are going to explain How to Install CSS tool Tip in Blogger Template.The main advantage of tool tip is that you can give extra indicate information regarding your post,article or anything with only one element.There are parcel's of stunts accessible over the internet to creating tool tip using javascript, bootstrap, CSS, HTML etc.But the CSS tool tip is entirely unexpected from every single other stunt with the assistance of CSS tool you can show the extra significant information regarding your point without providing any outer links.These Small Popup Bubbles make your site exceptional.

DEMO

We have used Pure CSS for creating tool tip element.rest all the tricks for making or simply tool tip is big and confusing,best is one is only the CSS. We have developed this CSS tool tip with as much as possible in a precise way.We have tried hard to serve best to our readers this tool tip is very simple with just an info element.Let's take a look on how to create CSS tool tip for blogspot websites or blog.To implement this trick just follow the steps mentioned below.
HOW TO CREATE CSS TOOL TIP FOR BLOGGER TEMPLATE

Installation Steps:

Step 1. Log in to your Blogger account and Go to your Blogger Dashboard.

Step 2. Now go to Template -> Edit HTML.
Step 3. Now Search for ]]></b:skin> or </style> by Pressing Ctrl+F keys.
Step 4. Copy the below CSS code and paste it just before the ]]></b:skin> or </style> tag.

/* CSS Tool Tip Trick by SayemTutorial.Blogspot.com*/
.bsd-tooltip{position:absolute;top:16px;right:16px;text-align:center;background-color:#ff4400;border-radius:50%;width:24px;height:24px;font-size:12px;line-height:26px;cursor:default;transition:all 0.5s cubic-bezier(0.55,0,0.1,1)}
.bsd-tooltip:hover{cursor:pointer;background-color:#666}
.bsd-tooltip:before{content:'!';font-weight:900;color:#fff}
.bsd-tooltip p{visibility:hidden;opacity:0;text-align:left;background-color:#ff4400;padding:20px;width:300px;position:absolute;border-radius:6px;right:-6px;color:#fff;font-size:12px;line-height:normal;transform:scale(0.7);transform-origin:100% 0%;transition:all 0.5s cubic-bezier(0.55,0,0.1,1)}
.bsd-tooltip:hover p{cursor:default;visibility:visible;opacity:1;transform:scale(1.0)}
.bsd-tooltip p:before{position:absolute;content:'';width:0;height:0;border:6px solid transparent;border-bottom-color:#ff4400;right:10px;top:-12px}
.bsd-tooltip p:after{width:100%;height:40px;content:'';position:absolute;top:-5px;left:0}
.bsd-tooltip a{color:#fff;font-weight:700}
.bsd-tooltip a:hover,.bsd-tooltip a:focus{color:#fff;text-decoration:underline}

Step 5. Now Save your Template..Done !

HOW TO ADD CSS TOOL TIP HTML CODE IN BLOGSPOT 

This is very simple,after completing above step that means you have installed css tool tip code snippet in your blogger template.But now to display the tool tip information box in website you need to add HTML code.You can add this HTML code inside your posts or anywhere you want to display the specific information regarding anything you can embed this html tool tip over there.So when you create new post and you want to add tool tip HTML just click on HTML button near the compose button change the view to html mode of your post and past this below HTML code and publish your post ,That's it.!

<div class="bsd-tooltip">
<p>How to Install Tool Tip In Blogger Template to display a Additional post information to the readers.
</p>
</div>

Customization:

Replace the above How to Install Tool Tip In Blogger Template to display a Additional post information to the readers. lines with your content or information message.