কম্পিউটার টিউটোরিয়াল

CSS দিয়ে টুলটিপ সঠিকভাবে পজিশন করুন


টুলটিপ সঠিকভাবে পজিশন করতে right, left, top এবং bottom প্রপার্টিগুলো ব্যবহার করুন।

ডান পাশে টুলটিপ পজিশন করার পদ্ধতি দেখি:

উদাহরণ

<!DOCTYPE html> <html>    <style>       .mytooltip .mytext {          visibility: hidden;          width: 140px;          background-color: blue;          color: #fff;          z-index: 1;          top: -6px;          left: 100%;          text-align: center;          border-radius: 6px;          padding: 5px 0;          position: absolute;       }       .mytooltip {          position: relative;          display: inline-block;       }       .mytooltip:hover .mytext {           visibility: visible;       }    </style>    <body>       <div class = "mytooltip">Keep mouse cursor over me          <span class = "mytext"> My Tooltip text</span>       </div>    </body> </html>

  1. CSS দিয়ে HR এলিমেন্ট স্টাইল করার পদ্ধতি

  2. CSS দিয়ে লেবেল স্টাইল করার পদ্ধতি

  3. CSS দিয়ে স্ক্রোলবার লুকানো

  4. CSS দিয়ে অ্যারো (Arrow) তৈরি