Post එකේ කැමති වචන වලට CSS Tooltip එකක් දෙන ආකාරය

ඔබ සමහර වෙලාවට වෙබ් අඩවි වල දැක ඇති සමහර වචන සාමාන්‍ය ආකාරයට වඩා වෙනස් ආකාරයට කරල තියෙන highlight මෙයින් විස්තර කෙරන දෙය වචනය උඩට රැගෙන ගියාම එයින් තව විස්තරයක් පේනවා ඔබ දැක ඇති. උදාහරණයක් විදියට ඉස්සෙල්ලා සදහන් කල highlight කියන වචනය උඩට යන්න එවිට මේ පැවසූ දෙය පැහැදිලිවම පෙනේවි.

මේක කරගන්නේ මෙහෙමයි. මෙන්න මේ කේතය Design ----> Template Designer ----> Advanced -----> ADD CSS වලට paste කර ගන්න.

.tooltip
{
position: relative;
background: #eaeaea;
cursor: help;
display: inline-block;
text-decoration: none;

color: #222;

outline: none;
}

.tooltip span
{
visibility: hidden;
position: absolute;
bottom: 30px;
left: 50%;
z-index: 999;
width: 230px;
margin-left: -127px;
padding: 10px;

border: 2px solid #ccc;

opacity: .9;

background-color: #ddd;

background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
-moz-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
text-shadow: 0 1px 0 rgba(255,255,255,.4);
}

.tooltip:hover
{
border: 0; /* IE6 fix */
}

.tooltip:hover span
{
visibility: visible;
}

.tooltip span:before,
.tooltip span:after
{
content: "";
position: absolute;
z-index: 1000;
bottom: -7px;
left: 50%;
margin-left: -8px;

border-top: 8px solid #ddd;

border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 0;
}

.tooltip span:before
{

border-top-color: #ccc;

bottom: -8px;
}

මේ කේතයේ කහපාටින් දක්වා ඇත්තේ ඔබට අවශ්‍ය ආකාරයට මෙම tooltip එකට අදාල වර්ණයන් වෙනස් කර ගත හැකි ස්ථාන. ඔබට එම වර්ණයන්ට අදාල කේතයන් දැන ගැනීම සදහා මෙම RGB වර්ණයන් සදහා http://www.seoconsultants.com/css/colors/rgb වෙබ් අඩවියටද hex color values සදහා http://www.theodora.com/html_colors.html වෙබ් අඩවියටද පිවිසීමෙන් දැනගන්න පුළුවන්. ඒ වගේම ඔබට CSS පිළිබද යම් දැනුමක් තිබෙනවා නම් මෙම කේතයේ අගයන් වල තවත් වෙනස් කම් කිරීමෙන් තමන්ට ගැලපෙන විදියට මෙය සකස්කරගන්නත් හැකියි.

මෙන්න මේ කේතය තමයි Edit HTML ගිහිල්ල අපි type කරපු වචනයට tooltip එක ගන්න දෙන්න අවශ්‍ය

<a href="#" class="tooltip">
Tooltip එක යෙදිය යුතු වචනය
<span>මෙයින් විස්තර කෙරන දෙය</span>
</a>

දැන් පෙර පෙන්වපු highlight කියන වචනයට tooltip එකක් ගන්න භාවිතා කලේ මෙන්න මේ විදියටයි.
ඔබ සමහර වෙලාවට වෙබ් අඩවි වල දැක ඇති සමහර වචන සාමාන්‍ය ආකාරයට වඩා වෙනස් ආකාරයට කරල තියෙන <a href="#" class="tooltip">highlight <span>මෙයින් විස්තර කෙරන දෙය</span></a> වචනය උඩට රැගෙන ගියාම එයින් තව විස්තරයක් පේනවා ඔබ දැක ඇති.

මේ දෙය කරගන්නා ආකාරය ටිකක් සංකීර්ණවගේ පෙනුනත් එය අවධානයෙන් කලොත් අමාරුවෙන එකක් නැහැ...