How To Install CSS Tool Tip In Blogger Template

Do you know what is Tool Tip? You might have seen in websites or blog when you move mouse over an element icon then small popup box appear with extra information and after when you slide your move to anywhere the popup box disappear 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 benefit of tool tip is that you can provide extra specify information regarding your post,article or anything with just one element.There are lot's of tricks available over the internet to creating tool tip using javascript, bootstrap, CSS, HTML etc.But the CSS tool tip is totally different from all other tricks with the help of CSS tool you can show the extra important information regarding your topic without providing any external links.These Small Popup Bubbles make your website unique.

See the Pen How To Install CSS Tool Tip In Blogger Template by Deja (@Deja2) on CodePen.

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.

.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 highlighted lines with your content or information message.