தொட்டால் விவரிக்கும் இணைப்புகள் (Tool Tip)

வணக்கம் நண்பர்களே தொட்டால் விவரிக்கும் இணைப்புகளை பார்த்தோம் . அந்த வரிசையில் இன்று பார்க்க இருப்பது .... எச்சரிக்கை , உதவி , தகவல்கள் ,பாதிக்கப்பட்டுள்ளது என சிலவார்தைகளை தொட்டால் அதன் விளக்கங்களை காட்டும் Tooltip Box எப்படி உருவாக்கலாம் என்பதை பார்க்க போகிறோம் .
 முதலில் பிளாக்கர் கணக்கில் சென்று Template Edit HTML என்பதை கிளிக் செய்து கீழே காணும் நிரலை அறிந்து அதன் பின்னே அடுத்து வரு நிரலை Paste செய்யவும் . ]]</b:skin> 

/* Tooltips By Enterplus */.tbi-tooltip {outline: none;cursor: help;position: relative;text-decoration: none;border-bottom: 1px dotted #000;}.tbi-tooltip span {margin-left: -999em;position: absolute;color: #000;}.tbi-tooltip:hover span {font-family: Trebuchet MS, Calibri, Tahoma, Geneva, sans-serif;position: absolute;left: 1em;top: 2em;z-index: 99;margin-left: 0;width: 250px;-moz-border-radius: 12px;-webkit-border-radius: 12px;border-radius: 12px;-moz-box-shadow: 0px 0px 9px #000000;-webkit-box-shadow: 0px 0px 9px #000000;box-shadow: 0px 0px 9px #000000;}.tbi-tooltip:hover img {border: 0;margin: -10px 0 0 -55px;float: left;position: absolute;}.tbi-tooltip:hover em {font-family: Candara, Tahoma, Geneva, sans-serif;font-size: 1.2em;font-weight: bold;display: block;padding: 0.2em 0 0.6em 0;}.custom {padding: 0.5em 0.8em 0.8em 2em;}.tbi-general {background: #EDEDED;background: url(data:image/svg+xml; base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YyZjVmNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjM3JSIgc3RvcC1jb2xvcj0iI2UzZWFlZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjOGQ3ZGMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);background: -moz-linear-gradient(top, rgba(242,245,246,1) 0%, rgba(227,234,237,1) 37%, rgba(200,215,220,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(242,245,246,1)), color-stop(37%,rgba(227,234,237,1)), color-stop(100%,rgba(200,215,220,1))); background: -webkit-linear-gradient(top, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%); background: -o-linear-gradient(top, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%); background: -ms-linear-gradient(top, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%); background: linear-gradient(to bottom, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f5f6', endColorstr='#c8d7dc',GradientType=0 ); -webkit-box-shadow: 4px 4px 1px 1px #ccc; box-shadow: 4px 4px 1px 1px #ccc; } .tbi-critical { border: 1px solid #FF3334; background: #ffccaa; background: url(data:image/svg+xml; base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmY2NhYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZjg0ODIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #ffccaa 0%, #ff8482 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffccaa), color-stop(100%,#ff8482)); background: -webkit-linear-gradient(top, #ffccaa 0%,#ff8482 100%); background: -o-linear-gradient(top, #ffccaa 0%,#ff8482 100%); background: -ms-linear-gradient(top, #ffccaa 0%,#ff8482 100%); background: linear-gradient(to bottom, #ffccaa 0%,#ff8482 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffccaa', endColorstr='#ff8482',GradientType=0 ); } .tbi-help { border: 1px solid #2BB0D7; background: #a9e4f7; background: url(data:image/svg+xml; base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2E5ZTRmNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwZmI0ZTciIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #a9e4f7 0%, #0fb4e7 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a9e4f7), color-stop(100%,#0fb4e7)); background: -webkit-linear-gradient(top, #a9e4f7 0%,#0fb4e7 100%); background: -o-linear-gradient(top, #a9e4f7 0%,#0fb4e7 100%); background: -ms-linear-gradient(top, #a9e4f7 0%,#0fb4e7 100%); background: linear-gradient(to bottom, #a9e4f7 0%,#0fb4e7 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9e4f7', endColorstr='#0fb4e7',GradientType=0 ); } .tbi-info { border: 1px solid #2BB0D7; background: #a9e4f7; background: url(data:image/svg+xml; base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2E5ZTRmNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwZmI0ZTciIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #a9e4f7 0%, #0fb4e7 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a9e4f7), color-stop(100%,#0fb4e7)); background: -webkit-linear-gradient(top, #a9e4f7 0%,#0fb4e7 100%); background: -o-linear-gradient(top, #a9e4f7 0%,#0fb4e7 100%); background: -ms-linear-gradient(top, #a9e4f7 0%,#0fb4e7 100%); background: linear-gradient(to bottom, #a9e4f7 0%,#0fb4e7 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9e4f7', endColorstr='#0fb4e7',GradientType=0 ); } .tbi-warning {border: 1px solid #FFAD33;background: #f1e767;background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YxZTc2NyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmY2JjNWQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);background: -moz-linear-gradient(top, #f1e767 0%, #fcbc5d 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f1e767), color-stop(100%,#fcbc5d));background: -webkit-linear-gradient(top, #f1e767 0%,#fcbc5d 100%);background: -o-linear-gradient(top, #f1e767 0%,#fcbc5d 100%);background: -ms-linear-gradient(top, #f1e767 0%,#fcbc5d 100%);background: linear-gradient(to bottom, #f1e767 0%,#fcbc5d 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1e767', endColorstr='#fcbc5d',GradientType=0 );}

அதன் பின்னர் எந்த பதிவில் அல்லது விட்ஜெட்-எந்த இடத்தில சேர்க்க வேண்டுமோ கீழே எந்த Tool tip வகை வேண்டுமோ அந்த நிரலை பயன்படுத்தவும் . பொதுவான Tooltip :

 <a class="tbi-tooltip" href="#">ANCHOR TEXT HERE<span class="custom tbi-general">TOOLTIP HERE</span></a>   Critical Tooltip :

<a class="tbi-tooltip" href="#">ANCHOR TEXT HERE<span class="custom tbi-critical"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgriHXkfqxw9wHaR-BxwdPAhhgZvtPBgKvAnDhpvIbcAkW8cuImAqa3qeWSLHfk40RpRteLS0C3330KNTBAIMUxbinbourw4hEde1DDmCgtnOIA9uhdZ1JSo1X2GM0HbyAy3xEVObrZcbk/s48/Critical.png" alt="Error" height="48" width="48" /><em>Critical</em>TOOLTIP HERE</span></a>

 எச்சரிக்கை (Warning) Tooltip:

<a class="tbi-tooltip" href="#">ANCHOR TEXT HERE<span class="custom tbi-warning"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl36Y-hc8xu8DgXjI9cI2dqdY7RqOrruMyKSEjaGp7V5of71yRL7gd0rZVZ4FOL3brBeVn-LnlF4Ufzbl-IoPdPZLiI3imtJKh2xYGF5nwlyV4KOigViNcEUh9CKB2lRAiu9pb8vz8JBo/s48/Warning.png" alt="Warning" height="48" width="48" /><em>Warning</em>TOOLTIP HERE</span></a>

உதவிக்கான  (Help) Tooltip :

<a class="tbi-tooltip" href="#">ANCHOR TEXT HERE<span class="custom tbi-help"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8_3xvJslZhgoXgs63rdQwrhKMH-VgxNeUb_NGwomY8QN2tGA3b5ne20it4CXdVuO7VvE-ukC1-o5S1rXCPPnwwhaR6VGv0KNiWkYCMn1iZuUdmV-F_YilW9ZpbmpjvNYhXzzkov10zLY/s48/Help.png" alt="Help" height="48" width="48" /><em>Help</em>TOOLTIP HERE</span></a>

தகவலுக்கான (Information )Tooltip :

<a class="tbi-tooltip" href="#">ANCHOR TEXT HERE<span class="custom tbi-info"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNafhoew-Ff7ApE5T3ALMSvtL5sDayDGZPWnkeZ0lnIpp0-gT2vfZYUYeaTc6GT7MS0J-U95lqNKMsYZ-SN7kSl1-dwD-7M9bnXbO-FAF2bqGk_o8ioN9k2naCvw0Gyian_KoDNGUrPS0/s48/Info.png" alt="Information" height="48" width="48" /><em>Information</em>TOOLTIP HERE</span></a>

Demo : பல வகையான Tool Tip -களை தொட்டு பார்த்து கொள்ளவும்

First one is General Tooltipஇது பொதுவான Tool Tip, Second is இது பொதுவான Tool TipCriticalஇது பொதுவான Critical tooltip.,
3rd is Warning Tooltipஇது எச்சரிக்கை Tool TipThis is just an example of Warning CSS tooltip., 4th is Help TooltipHelpThis is just an example of Help CSS tooltip. and the last and the final Fifth one is the இது தகவல் Tool TipInformation.