Wednesday, June 15, 2011

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> වචනය උඩට රැගෙන ගියාම එයින් තව විස්තරයක් පේනවා ඔබ දැක ඇති.

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

8 comments:

  1. තවත් පට්ට ලිපියක් ...කරල බලන්න ඕනි

    ReplyDelete
  2. ශා!! නියමයි අහ්හ්.. වර්ඩ්ප්‍රෙස් වලටත් වැඩ ඇති නේ.... :)

    ReplyDelete
  3. @buwa & ßuddh!ma™ - ස්තූතියි! මම හිතන්නේ Wordpress වලත් මෙය වැඩ කරාවි...

    ReplyDelete
  4. මේ තියෙන්නෙ ස්ටෑන්ඩඩ් html සහ css නිසා ඕනම අඩවියක වැඩ නොකරන්න හේතුවක් නෑ... නමුත් වර්ඩ් ප්‍රෙස්.කොම් වල html, css එඩිට් කරන්න දෙනවද කියලනම් මට මතක නෑ....

    ReplyDelete
  5. @hare :-) - හැබැයි මෙහෙම දෙයකුත් තියෙනවා. සමහර CSS code ඇතැම් Template වල වැඩ නොකරන අවස්ථාවන්නට මමත් මුහුණ දීලා තියෙනවා.අත්හදා බැළුවට වරදක් නැහැ...

    ReplyDelete
  6. කියවුවෙමි. අපටත් අවශ්‍ය විට මේ වගේ දේවල් ප්‍රයෝජනයට ගත හැකියිනේ ඔබේ පරණ ලිපි කියවා.

    ReplyDelete
  7. වැදගත් ලිපියක්. වුවමනා වුන ගමන් මේ පැත්තේ ඇවිත් කොපියක් දාගන්නම්. වෙනදා වගේම නොදන්නා දේවල් හොයා දෙනවට ස්තුතිය...!

    ReplyDelete
  8. @Bindi & චතුරංග පෙරේරා | chathuranga Perera - ස්තූතියි! මමත් පසුගිය දිනවල Template එකේ දෝශ නිසා අපහසුතාවයට පත්වුන නිසා දැන් අත්හදාබලන්න වගේම මෙහි පල කරන්නේත් CSS යොදාගෙන හානියක් නොවන ආකාරයේ ඒවා පමණයි. ඒක නිසා මේවා ඔබටත් බියක් නැතිවම අවශ්‍ය මොහොතක අත්හදාබැලිය හැකියි...

    ReplyDelete