How to Create and Display Custom HTML Tooltips in Your Blog Posts

Tooltips have become a standard feature on many modern websites, especially on professional blogs, documentation pages, and educational platforms. If you have browsed WordPress websites before, you have probably noticed small pop-up boxes that appear when hovering over specific words or phrases. These tooltips are commonly used to provide additional explanations, definitions, references, or short hidden notes without interrupting the flow of the article.

What is a Tooltip?

A tooltip is a small interactive element that reveals extra information when a visitor hovers their mouse over a word or clicks on it. Instead of cluttering an article with lengthy explanations, tooltips allow writers to keep their content clean while still giving readers access to important details whenever needed.

This feature is especially useful for tutorials, technical guides, educational articles, product reviews, and blog posts that contain abbreviations or unfamiliar terminology. By using tooltips, you can improve the readability of your content while creating a more professional and user-friendly experience for your audience.

The tooltip is designed to work properly on both desktop and mobile devices. Whether visitors are using a computer, tablet, or smartphone, the tooltip will automatically adjust for a better viewing experience.

Create Lightweight CSS & JavaScript Tooltips

In this tutorial, you will learn how to add responsive tooltips to your Blogger website using CSS and JavaScript. Although this tooltip script can work on most websites that support CSS and JavaScript, this tutorial focuses specifically on Blogger users.

Now, let's start! Follow the steps carefully below to install the tooltip feature on your Blogger website.

Step 1 — Add the CSS

The CSS code controls the appearance and styling of the tooltip. This includes the background color, text color, spacing, animation effects, borders, and responsiveness.

1. In your Blogger dashboard, navigate to Theme.
2. Click the arrow beside the Customize button, and select Edit HTML
3. Click anywhere inside the XML editor and press Ctrl + F (or Cmd + F on Mac)
4. Search for this tag: </b:skin>
5. Copy and paste the CSS code directly above it.

   #didatooltip{font:.9em/1.6 Tahoma,Sans-serif; text-shadow: 0 1px rgba( 0, 0, 0, .5 ); color: #fff; background: #000; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; border-top: 1px solid #fff; -webkit-box-shadow: 0 3px 5px rgba( 0, 0, 0, .3 ); -moz-box-shadow: 0 3px 5px rgba( 0, 0, 0, .3 ); box-shadow: 0 3px 5px rgba( 0, 0, 0, .3 ); position: absolute; z-index: 100; padding: 2px 5px 2px;}
   #didatooltip:after{width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 10px solid #333; border-top-color: rgba( 0, 0, 0, .9 ); content: ''; position: absolute; left: 50%; bottom: -7px; margin-left: -10px;}
   #didatooltip.top:after{border-top-color: transparent; border-bottom: 10px solid #333; border-bottom-color: rgba( 0, 0, 0, .9 ); top: -17px; bottom: auto;}
   #didatooltip.left:after{left: 10px; margin: 0;}
   #didatooltip.right:after{right: 10px; left: auto; margin: 0;}

You can modify the tooltip appearance by editing the CSS values:

• Background color
• Font size
• Border radius
• Padding
• Shadow effects
• Tooltip width

This allows you to create a tooltip style that perfectly matches your website design.

Step 2 — Add the Tooltip Script

The JavaScript code handles the interactive behavior of the tooltip. It detects user actions such as hovering or clicking and displays the hidden content dynamically.

1. While still inside your XML editor, press Ctrl + F (or Cmd + F on Mac).
2. Search for this tag: </body>
3. Copy and paste the script directly above it.

     <script>//<![CDATA[
     const _0x5b9601=_0x18bf;function _0x18bf(_0x5f09a4,_0x21b165){_0x5f09a4=_0x5f09a4-(-0x1856+0x21c1+0x2e*-0x2b);const _0x5bbb0a=_0x7dd0();let _0x9b6141=_0x5bbb0a[_0x5f09a4];return _0x9b6141;}(function(_0xdb1ec3,_0x18c37a){const _0x37fecd=_0x18bf,_0x16a51a=_0xdb1ec3();while(!![]){try{const _0x6c4bbc=-parseInt(_0x37fecd(0x212))/(0x10f3+-0x2*0x877+-0x4)+parseInt(_0x37fecd(0x225))/(-0x21ae+0xd5a+-0x13*-0x112)+parseInt(_0x37fecd(0x1f1))/(-0x2b8*-0xd+-0x12a3*0x1+-0x1*0x10b2)*(parseInt(_0x37fecd(0x1c0))/(-0x15*-0xd9+-0x1*-0x1459+-0x2622))+-parseInt(_0x37fecd(0x208))/(0x12c*-0x17+0x59*-0x16+0x229f)*(-parseInt(_0x37fecd(0x1e8))/(-0x217*-0x11+-0x5e7+0x4ef*-0x6))+-parseInt(_0x37fecd(0x1f7))/(-0x7*-0x265+0x48+0x2c*-0x63)*(parseInt(_0x37fecd(0x242))/(0x267d+-0x1*-0x256+-0xd99*0x3))+parseInt(_0x37fecd(0x23d))/(0xb8*-0x2e+0xfa*-0x1a+0x15*0x2c9)*(parseInt(_0x37fecd(0x211))/(-0x16c2+-0x147c+0x2b48*0x1))+-parseInt(_0x37fecd(0x209))/(0xd3*-0x11+0x1d*-0x11e+0x2e74);if(_0x6c4bbc===_0x18c37a)break;else _0x16a51a['push'](_0x16a51a['shift']());}catch(_0x52763b){_0x16a51a['push'](_0x16a51a['shift']());}}}(_0x7dd0,-0x1*-0x1b54b+-0x63e4f+0x7d856),document[_0x5b9601(0x230)+_0x5b9601(0x1ba)](_0x5b9601(0x1b7)+_0x5b9601(0x240),()=>{const _0x39ece4=_0x5b9601,_0x4dd88a={'zIbmF':function(_0x50e7de,_0x43de54){return _0x50e7de+_0x43de54;},'YSEcc':function(_0x53b9c9,_0x48d5bd){return _0x53b9c9<_0x48d5bd;},'qMsKH':function(_0x5dc6c8,_0x470933){return _0x5dc6c8*_0x470933;},'ciWys':function(_0x46c36c,_0x295ee4){return _0x46c36c/_0x295ee4;},'qCiWL':_0x39ece4(0x222),'iUMWf':function(_0xda8698,_0x5ce82a){return _0xda8698-_0x5ce82a;},'uLwtU':_0x39ece4(0x224),'JBNKx':_0x39ece4(0x1b4),'gDeVy':_0x39ece4(0x1c2),'fNZqb':function(_0x6b07de,_0x479e40){return _0x6b07de<_0x479e40;},'GDDhU':function(_0x4f4c95,_0xc7c1bc){return _0x4f4c95/_0xc7c1bc;},'Xzrhz':function(_0x496b7d,_0x36c5d1){return _0x496b7d>_0x36c5d1;},'zovvi':function(_0x3d4d3,_0x170f88){return _0x3d4d3(_0x170f88);},'mZhuy':_0x39ece4(0x1ee),'guXmr':_0x39ece4(0x1d5),'oTtOn':function(_0x408a43,_0x16d8d5,_0xc91c7e){return _0x408a43(_0x16d8d5,_0xc91c7e);},'YCGwY':_0x39ece4(0x1ed),'yhkaG':_0x39ece4(0x213),'ZvBRw':_0x39ece4(0x20d)+'p','gQxkz':function(_0x7440e7){return _0x7440e7();},'GGkco':_0x39ece4(0x1d8),'TvQqv':_0x39ece4(0x1d3),'KxgUH':_0x39ece4(0x1db),'YKntt':_0x39ece4(0x1fc)+_0x39ece4(0x237)},_0x2ff7d2=document[_0x39ece4(0x1f4)+_0x39ece4(0x1f5)](_0x4dd88a[_0x39ece4(0x1c6)]);_0x2ff7d2[_0x39ece4(0x226)](_0x4a2cdf=>{const _0xdda883=_0x39ece4,_0xbe5c3a={'HHlcv':function(_0x23da16,_0xcaf5c5){const _0x5afc10=_0x18bf;return _0x4dd88a[_0x5afc10(0x235)](_0x23da16,_0xcaf5c5);},'tPPfF':function(_0x4d5b82,_0x599284){const _0x589275=_0x18bf;return _0x4dd88a[_0x589275(0x1da)](_0x4d5b82,_0x599284);},'ldceg':function(_0x3bc6da,_0x4cc144){const _0x398a53=_0x18bf;return _0x4dd88a[_0x398a53(0x1de)](_0x3bc6da,_0x4cc144);},'yehMH':function(_0x3adb2f,_0xbdb2b4){const _0x1316c3=_0x18bf;return _0x4dd88a[_0x1316c3(0x235)](_0x3adb2f,_0xbdb2b4);},'HjcRY':function(_0x1f6e70,_0x318809){const _0x3ea80a=_0x18bf;return _0x4dd88a[_0x3ea80a(0x204)](_0x1f6e70,_0x318809);},'lcGkv':_0x4dd88a[_0xdda883(0x1b3)],'jECzJ':function(_0x3d622c,_0x42e416){const _0x44d879=_0xdda883;return _0x4dd88a[_0x44d879(0x1cf)](_0x3d622c,_0x42e416);},'YgGPX':function(_0x38d650,_0x1f8b8d){const _0x59f59b=_0xdda883;return _0x4dd88a[_0x59f59b(0x204)](_0x38d650,_0x1f8b8d);},'iyoNE':_0x4dd88a[_0xdda883(0x241)],'kACHv':_0x4dd88a[_0xdda883(0x22b)],'PIzvJ':_0x4dd88a[_0xdda883(0x1e6)],'OWQkz':function(_0x194177,_0x35ae2d){const _0x360814=_0xdda883;return _0x4dd88a[_0x360814(0x223)](_0x194177,_0x35ae2d);},'bKtmu':function(_0x48285a,_0x3ea6f4){const _0xc349ca=_0xdda883;return _0x4dd88a[_0xc349ca(0x1cf)](_0x48285a,_0x3ea6f4);},'GhEVY':function(_0x387ec3,_0x591ab0){const _0x5deeb4=_0xdda883;return _0x4dd88a[_0x5deeb4(0x235)](_0x387ec3,_0x591ab0);},'IcrdP':function(_0x46e76a,_0x32cdd6){const _0x235d5d=_0xdda883;return _0x4dd88a[_0x235d5d(0x227)](_0x46e76a,_0x32cdd6);},'kBWbQ':function(_0x3c1b1e,_0x2cf42a){const _0x2d8375=_0xdda883;return _0x4dd88a[_0x2d8375(0x1f6)](_0x3c1b1e,_0x2cf42a);},'kFLRW':function(_0x262bda,_0x57bb8a){const _0x127fe6=_0xdda883;return _0x4dd88a[_0x127fe6(0x235)](_0x262bda,_0x57bb8a);},'CWSGm':function(_0x15dc0,_0x5ad459){const _0x48df96=_0xdda883;return _0x4dd88a[_0x48df96(0x1d6)](_0x15dc0,_0x5ad459);},'sfCNx':_0x4dd88a[_0xdda883(0x1d0)],'BNYEs':_0x4dd88a[_0xdda883(0x1e9)],'YNmXa':function(_0x1e2c35,_0x54905b,_0x48293a){const _0x26df8d=_0xdda883;return _0x4dd88a[_0x26df8d(0x1d4)](_0x1e2c35,_0x54905b,_0x48293a);},'FaAqc':_0x4dd88a[_0xdda883(0x1f0)],'robYE':_0x4dd88a[_0xdda883(0x1fe)],'bfpJs':_0x4dd88a[_0xdda883(0x205)],'AKmzJ':function(_0x24111b){const _0x180756=_0xdda883;return _0x4dd88a[_0x180756(0x216)](_0x24111b);},'BjCLP':_0x4dd88a[_0xdda883(0x221)],'VRRBw':_0x4dd88a[_0xdda883(0x1e7)]};_0x4a2cdf[_0xdda883(0x230)+_0xdda883(0x1ba)](_0x4dd88a[_0xdda883(0x1c8)],function(){const _0x5034c0=_0xdda883,_0x2b1313={'eitVo':function(_0x18359a,_0x4ae2d6){const _0x52483c=_0x18bf;return _0xbe5c3a[_0x52483c(0x1fb)](_0x18359a,_0x4ae2d6);},'wxuYg':function(_0x39b068,_0x650c65){const _0x5e6a9b=_0x18bf;return _0xbe5c3a[_0x5e6a9b(0x23f)](_0x39b068,_0x650c65);},'TQPsa':function(_0x40922b,_0x1f6c57){const _0x2ea7fc=_0x18bf;return _0xbe5c3a[_0x2ea7fc(0x22e)](_0x40922b,_0x1f6c57);},'ZxXDG':function(_0x40bb33,_0x1ba695){const _0x14c02e=_0x18bf;return _0xbe5c3a[_0x14c02e(0x23c)](_0x40bb33,_0x1ba695);},'Yachg':function(_0x1c294d,_0x278e04){const _0x1f9e94=_0x18bf;return _0xbe5c3a[_0x1f9e94(0x1c4)](_0x1c294d,_0x278e04);},'PfFxj':_0xbe5c3a[_0x5034c0(0x1d9)],'hMGEc':function(_0x59001e,_0x1f674b){const _0xcaf73b=_0x5034c0;return _0xbe5c3a[_0xcaf73b(0x21e)](_0x59001e,_0x1f674b);},'fLGvw':function(_0x2e04c3,_0x1c51fd){const _0xa79ad4=_0x5034c0;return _0xbe5c3a[_0xa79ad4(0x23c)](_0x2e04c3,_0x1c51fd);},'CIijo':function(_0x437c01,_0x34836f){const _0x47ad1d=_0x5034c0;return _0xbe5c3a[_0x47ad1d(0x1bc)](_0x437c01,_0x34836f);},'IRnKM':function(_0xba755f,_0x142ade){const _0x572292=_0x5034c0;return _0xbe5c3a[_0x572292(0x1bc)](_0xba755f,_0x142ade);},'hqgyt':function(_0x5a1bbd,_0x32fda4){const _0x128ff0=_0x5034c0;return _0xbe5c3a[_0x128ff0(0x21e)](_0x5a1bbd,_0x32fda4);},'niuta':function(_0x4a8592,_0x188885){const _0x4a8ed7=_0x5034c0;return _0xbe5c3a[_0x4a8ed7(0x21e)](_0x4a8592,_0x188885);},'ybGju':_0xbe5c3a[_0x5034c0(0x22c)],'lBdQb':_0xbe5c3a[_0x5034c0(0x20f)],'qeoDJ':_0xbe5c3a[_0x5034c0(0x1b5)],'gyQTu':function(_0x6bf21a,_0x406b6d){const _0x4d14ae=_0x5034c0;return _0xbe5c3a[_0x4d14ae(0x22f)](_0x6bf21a,_0x406b6d);},'WmKFC':function(_0x143392,_0x448382){const _0x2c7b8a=_0x5034c0;return _0xbe5c3a[_0x2c7b8a(0x1f3)](_0x143392,_0x448382);},'uFwPX':function(_0x3b985e,_0x50e0ff){const _0x453a2e=_0x5034c0;return _0xbe5c3a[_0x453a2e(0x1b2)](_0x3b985e,_0x50e0ff);},'Qdqun':function(_0x485bad,_0x3c8b1d){const _0x5e6e13=_0x5034c0;return _0xbe5c3a[_0x5e6e13(0x23c)](_0x485bad,_0x3c8b1d);},'FjURN':function(_0x3d0974,_0x3fc21a){const _0x344ea3=_0x5034c0;return _0xbe5c3a[_0x344ea3(0x229)](_0x3d0974,_0x3fc21a);},'JyRtK':function(_0x2324ba,_0xa26245){const _0x1932d2=_0x5034c0;return _0xbe5c3a[_0x1932d2(0x1ca)](_0x2324ba,_0xa26245);},'pOZjZ':function(_0x1b1c19,_0x2e2309){const _0x3d0a22=_0x5034c0;return _0xbe5c3a[_0x3d0a22(0x1b2)](_0x1b1c19,_0x2e2309);},'yLGSc':function(_0x54f767,_0x4aab5a){const _0x66c2a6=_0x5034c0;return _0xbe5c3a[_0x66c2a6(0x1fb)](_0x54f767,_0x4aab5a);},'VZwPf':function(_0x4f2e0e,_0x215e42){const _0x262a69=_0x5034c0;return _0xbe5c3a[_0x262a69(0x1e0)](_0x4f2e0e,_0x215e42);},'lISDD':function(_0x1e1401,_0x55cd19){const _0x198f18=_0x5034c0;return _0xbe5c3a[_0x198f18(0x23c)](_0x1e1401,_0x55cd19);},'FEQkI':function(_0x41c815,_0x220506){const _0x52e039=_0x5034c0;return _0xbe5c3a[_0x52e039(0x1b2)](_0x41c815,_0x220506);},'GUIEd':function(_0x166e5b,_0x237b1e){const _0x66a209=_0x5034c0;return _0xbe5c3a[_0x66a209(0x1f3)](_0x166e5b,_0x237b1e);},'peODj':function(_0xfea9ee,_0x27dff8){const _0x2a4272=_0x5034c0;return _0xbe5c3a[_0x2a4272(0x218)](_0xfea9ee,_0x27dff8);},'wbkqv':_0xbe5c3a[_0x5034c0(0x21b)],'YaStG':_0xbe5c3a[_0x5034c0(0x1fa)],'WyiHd':function(_0x3230be,_0x4d1d17){const _0x46eef2=_0x5034c0;return _0xbe5c3a[_0x46eef2(0x1e0)](_0x3230be,_0x4d1d17);},'xHHpT':function(_0x584371,_0x801474,_0x22b221){const _0x47ff2=_0x5034c0;return _0xbe5c3a[_0x47ff2(0x1dc)](_0x584371,_0x801474,_0x22b221);},'qSYIV':_0xbe5c3a[_0x5034c0(0x203)]};let _0x65bcbc=this[_0x5034c0(0x1e5)+'te'](_0xbe5c3a[_0x5034c0(0x203)]);if(!_0x65bcbc)return;const _0x311d56=document[_0x5034c0(0x239)+_0x5034c0(0x1f8)](_0xbe5c3a[_0x5034c0(0x1b1)]);_0x311d56['id']=_0xbe5c3a[_0x5034c0(0x20e)],_0x311d56[_0x5034c0(0x214)]=_0x65bcbc,document[_0x5034c0(0x1bb)][_0x5034c0(0x1e4)+'d'](_0x311d56),this[_0x5034c0(0x1df)+_0x5034c0(0x1e1)](_0xbe5c3a[_0x5034c0(0x203)]);const _0x5e24ed=()=>{const _0x49a0c3=_0x5034c0,_0x598e8a={'tAxVA':function(_0x292b2d,_0x50a113){const _0x2db3e8=_0x18bf;return _0x2b1313[_0x2db3e8(0x210)](_0x292b2d,_0x50a113);}};let _0x41a9a8=window[_0x49a0c3(0x1be)],_0x5238ae=this[_0x49a0c3(0x217)+_0x49a0c3(0x1ec)+'t'](),_0x30b67c=window[_0x49a0c3(0x1b8)+'t']||document[_0x49a0c3(0x1fd)+_0x49a0c3(0x1e2)][_0x49a0c3(0x23a)],_0x107604=window[_0x49a0c3(0x200)+'t']||document[_0x49a0c3(0x1fd)+_0x49a0c3(0x1e2)][_0x49a0c3(0x236)];_0x2b1313[_0x49a0c3(0x215)](_0x41a9a8,_0x2b1313[_0x49a0c3(0x1f2)](_0x311d56[_0x49a0c3(0x1ef)+'h'],-0xac3+0x94b+0x179+0.5))?_0x311d56[_0x49a0c3(0x1d1)][_0x49a0c3(0x1e3)]=_0x2b1313[_0x49a0c3(0x21a)](_0x2b1313[_0x49a0c3(0x1ea)](_0x41a9a8,-0xd4*-0x25+0x183d+-0x36df),'px'):_0x311d56[_0x49a0c3(0x1d1)][_0x49a0c3(0x1e3)]=_0x2b1313[_0x49a0c3(0x231)];let _0x36d0e6=_0x2b1313[_0x49a0c3(0x228)](_0x2b1313[_0x49a0c3(0x1bf)](_0x2b1313[_0x49a0c3(0x21a)](_0x5238ae[_0x49a0c3(0x224)],_0x107604),_0x2b1313[_0x49a0c3(0x1bd)](this[_0x49a0c3(0x1ef)+'h'],0xcd4*0x1+0xbea+-0x18bc)),_0x2b1313[_0x49a0c3(0x21c)](_0x311d56[_0x49a0c3(0x1ef)+'h'],0x1147+0xb01+-0x4d*0x5e)),_0x4a2e04=_0x2b1313[_0x49a0c3(0x1f9)](_0x2b1313[_0x49a0c3(0x1d2)](_0x2b1313[_0x49a0c3(0x21a)](_0x5238ae[_0x49a0c3(0x1c2)],_0x30b67c),_0x311d56[_0x49a0c3(0x207)+'ht']),0x23*0x5+0x158e+-0x162c);_0x311d56[_0x49a0c3(0x1d7)][_0x49a0c3(0x201)](_0x2b1313[_0x49a0c3(0x1c7)],_0x2b1313[_0x49a0c3(0x220)],_0x2b1313[_0x49a0c3(0x20c)]);if(_0x2b1313[_0x49a0c3(0x238)](_0x36d0e6,-0x3b9*-0x9+0x623+0x2*-0x13d2))_0x36d0e6=_0x2b1313[_0x49a0c3(0x20b)](_0x2b1313[_0x49a0c3(0x219)](_0x2b1313[_0x49a0c3(0x202)](_0x5238ae[_0x49a0c3(0x224)],_0x107604),_0x2b1313[_0x49a0c3(0x1b6)](this[_0x49a0c3(0x1ef)+'h'],0x10a*-0xb+0xb9*0x22+-0xd22)),0xaae+-0xa99+0x4*-0x1),_0x311d56[_0x49a0c3(0x1d7)][_0x49a0c3(0x23e)](_0x2b1313[_0x49a0c3(0x1c7)]);else _0x2b1313[_0x49a0c3(0x23b)](_0x2b1313[_0x49a0c3(0x1c3)](_0x36d0e6,_0x311d56[_0x49a0c3(0x1ef)+'h']),_0x41a9a8)&&(_0x36d0e6=_0x2b1313[_0x49a0c3(0x202)](_0x2b1313[_0x49a0c3(0x1ce)](_0x2b1313[_0x49a0c3(0x20b)](_0x2b1313[_0x49a0c3(0x1cb)](_0x5238ae[_0x49a0c3(0x224)],_0x107604),_0x311d56[_0x49a0c3(0x1ef)+'h']),_0x2b1313[_0x49a0c3(0x1ea)](this[_0x49a0c3(0x1ef)+'h'],-0x97a*0x1+-0x2*0x2f7+0xf6a)),-0x2d7*-0x1+-0x1c84+0x5*0x526),_0x311d56[_0x49a0c3(0x1d7)][_0x49a0c3(0x23e)](_0x2b1313[_0x49a0c3(0x220)]));_0x2b1313[_0x49a0c3(0x238)](_0x4a2e04,-0xef*-0x1+-0x1b15+-0xd13*-0x2)&&(_0x4a2e04=_0x2b1313[_0x49a0c3(0x210)](_0x2b1313[_0x49a0c3(0x1ff)](_0x5238ae[_0x49a0c3(0x1c2)],_0x30b67c),this[_0x49a0c3(0x207)+'ht']),_0x311d56[_0x49a0c3(0x1d7)][_0x49a0c3(0x23e)](_0x2b1313[_0x49a0c3(0x20c)])),_0x311d56[_0x49a0c3(0x1d1)][_0x49a0c3(0x224)]=_0x2b1313[_0x49a0c3(0x1c3)](_0x36d0e6,'px'),_0x311d56[_0x49a0c3(0x1d1)][_0x49a0c3(0x1c2)]=_0x2b1313[_0x49a0c3(0x1cc)](_0x2b1313[_0x49a0c3(0x234)](_0x4a2e04,0xf*0x1c9+0x1b30+-0x35ed),'px'),_0x2b1313[_0x49a0c3(0x20a)](requestAnimationFrame,()=>{const _0x54f88f=_0x49a0c3;_0x311d56[_0x54f88f(0x1d1)][_0x54f88f(0x1c2)]=_0x598e8a[_0x54f88f(0x233)](_0x4a2e04,'px'),_0x311d56[_0x54f88f(0x1d1)][_0x54f88f(0x21f)]='1';});};_0xbe5c3a[_0x5034c0(0x243)](_0x5e24ed),window[_0x5034c0(0x230)+_0x5034c0(0x1ba)](_0xbe5c3a[_0x5034c0(0x1fa)],_0x5e24ed);const _0x2aab44=()=>{const _0x4e8b59=_0x5034c0,_0x56c108=_0x2b1313[_0x4e8b59(0x22a)][_0x4e8b59(0x21d)]('|');let _0x128124=0x136f*-0x1+0x6*0xce+0xe9b;while(!![]){switch(_0x56c108[_0x128124++]){case'0':window[_0x4e8b59(0x232)+_0x4e8b59(0x206)](_0x2b1313[_0x4e8b59(0x1c9)],_0x5e24ed);continue;case'1':_0x311d56[_0x4e8b59(0x1d1)][_0x4e8b59(0x1c2)]=_0x2b1313[_0x4e8b59(0x1cd)](_0x2b1313[_0x4e8b59(0x20b)](_0x2b1313[_0x4e8b59(0x20a)](parseFloat,_0x311d56[_0x4e8b59(0x1d1)][_0x4e8b59(0x1c2)]),0x44c+0x51a*0x3+0x2*-0x9c8),'px');continue;case'2':_0x2b1313[_0x4e8b59(0x1b9)](setTimeout,()=>{const _0x5c5a5c=_0x4e8b59;if(_0x311d56[_0x5c5a5c(0x1c5)])_0x311d56[_0x5c5a5c(0x201)]();},0x73*-0x33+-0x1228+-0x5e5*-0x7);continue;case'3':this[_0x4e8b59(0x1eb)+'te'](_0x2b1313[_0x4e8b59(0x1dd)],_0x65bcbc);continue;case'4':_0x311d56[_0x4e8b59(0x1d1)][_0x4e8b59(0x21f)]='0';continue;}break;}};this[_0x5034c0(0x230)+_0x5034c0(0x1ba)](_0xbe5c3a[_0x5034c0(0x1c1)],_0x2aab44,{'once':!![]}),_0x311d56[_0x5034c0(0x230)+_0x5034c0(0x1ba)](_0xbe5c3a[_0x5034c0(0x22d)],_0x2aab44);});});}));function _0x7dd0(){const _0x1228bd=['GGkco','340px','fNZqb','left','739224TQuBLR','forEach','GDDhU','hMGEc','IcrdP','wbkqv','JBNKx','iyoNE','VRRBw','ldceg','OWQkz','addEventLi','PfFxj','removeEven','tAxVA','GUIEd','zIbmF','scrollLeft','tip]','gyQTu','createElem','scrollTop','JyRtK','yehMH','54xQBXdl','add','tPPfF','Loaded','uLwtU','310584QvdMWl','AKmzJ','robYE','GhEVY','qCiWL','right','PIzvJ','FjURN','DOMContent','pageYOffse','xHHpT','stener','body','YgGPX','CIijo','innerWidth','fLGvw','301456lwFtfl','BjCLP','top','pOZjZ','HjcRY','parentNode','YKntt','ybGju','KxgUH','YaStG','kBWbQ','VZwPf','FEQkI','WyiHd','yLGSc','iUMWf','mZhuy','style','niuta','click','oTtOn','resize','zovvi','classList','mouseleave','lcGkv','YSEcc','mouseenter','YNmXa','qSYIV','qMsKH','removeAttr','kFLRW','ibute','ement','maxWidth','appendChil','getAttribu','gDeVy','TvQqv','65508mPIYRI','guXmr','Yachg','setAttribu','gClientRec','title','4|1|2|3|0','offsetWidt','YCGwY','15pdRunv','TQPsa','bKtmu','querySelec','torAll','Xzrhz','63ZaOEtI','ent','hqgyt','BNYEs','HHlcv','[rel~=tool','documentEl','yhkaG','lISDD','pageXOffse','remove','Qdqun','FaAqc','ciWys','ZvBRw','tListener','offsetHeig','180TNamwW','6287677pKnzll','peODj','WmKFC','qeoDJ','didatoolti','bfpJs','kACHv','eitVo','390770vGiJZW','236014dKauBG','div','innerHTML','wxuYg','gQxkz','getBoundin','CWSGm','uFwPX','ZxXDG','sfCNx','IRnKM','split','jECzJ','opacity','lBdQb'];_0x7dd0=function(){return _0x1228bd;};return _0x7dd0();}
   //]]></script>

4. Click Save

Step 3 — Display the Tooltip in Your Post

After installing both the CSS and JavaScript, you can now start displaying tooltips anywhere inside your blog posts.

To create a tooltip, simply add the following attributes to any HTML element:

title="Your tooltip content" rel="tooltip"

You may use these attributes on tags such as: <abbr>, <span>, <a>, <strong>, <button>

Result

This tooltip system includes several useful features that make it practical for modern websites.

• Responsive design
• Lightweight and fast
• HTML formatting support (<b>, <b>, <a>, etc.)
• Easy integration
• Clean and modern appearance

Create Lightweight CSS-Only Tooltips

If you prefer not to use JavaScript to save space, you can create tooltips using only CSS.

1. Copy and paste the CSS before the closing </b:skin> or </style> tag

   .didatooltip{display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; margin: 0;}
   .d-text--bg:hover{color: #3b5998}
   .d-text--bg:hover::after{background: #3b5998}
   .d-text{position: relative; color: #000;}
   .d-text:not(:last-of-type){margin-right: 15px;}
   .d-tooltip::before, .d-tooltip::after{display: block; position: absolute; left: 50%; transform: translate(-50%, -10px); opacity: 0; transition: .2s;}
   .d-tooltip::before{content: ''; bottom: calc(100% + 2px); border: solid 5px transparent; border-top-color: currentColor;}
   .d-tooltip::after{content: attr(aria-label); bottom: calc(100% + 12px); padding: .61em .93em; font-size: .875rem; color: white; border-radius: 3px; width: max-content;}
   .d-tooltip:hover::before, .d-tooltip:hover::after{opacity: 1; transform: translate(-50%);}

2. Click Save
3. To display your tooltips, add the following attributes to any HTML element.

   <p class="didatooltip d-text d-text--bg d-tooltip" aria-label="Example">Hover here.</p>

4. To customize the tooltip note, simply edit the aria-label="Example" text with your preferred message.
5. Result:

   Hover here.

Tips

While tooltips are useful, they should be used carefully to maintain a good user experience. Here are some recommended practices:

• Keep Content Short: Tooltips work best for short explanations or quick notes. Avoid placing large paragraphs inside them.
• Use Tooltips Only When Necessary: Too many tooltips can become distracting and reduce readability.
• Ensure Mobile Compatibility: Always test your tooltips on mobile devices to confirm they display properly.
• Match Your Website Design: Customize the tooltip colors and fonts so they blend naturally with your website theme.
• Avoid Important Hidden Information: Do not place critical information exclusively inside tooltips because some users may overlook them.

Troubleshooting

If the tooltip does not work after installation, here are several things you should check:

• CSS Not Added Correctly: Make sure the CSS code is placed above the closing </b:skin> tag.
• JavaScript Not Working: Ensure the script is placed before the closing </body> tag.
• HTML Syntax Errors: A missing quotation mark or bracket can prevent the tooltip from functioning properly.

And that's it! You now have a responsive and professional tooltip system for your Blogger posts. Start using it to create cleaner, more interactive, and more engaging content for your readers.