தொட்டால் விவரிக்கும் இணைப்புகள் (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>