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

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

বাম দিকে টুলটিপ তৈরি

বাম পাশে টুলটিপ দেখানোর জন্য CSS right প্রপার্টি ব্যবহার করা হয়।

উদাহরণ

নিচের কোড চালিয়ে টেক্সটের বাম পাশে টুলটিপ দেখান:

<!DOCTYPE html> <html>    <style>       .mytooltip .mytext {          visibility: hidden;          width: 140px;          background-color: orange;          color: white;          z-index: 1;          top: -6px;          right: 100%;          text-align: center;          border-radius: 6px;          padding: 5px 0;          position: absolute;       }       .mytooltip {          position: relative;          display: inline-block;          margin-left: 150px;       }       .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>

ব্যাখ্যা: right: 100% এবং top: -6px সেট করলে টুলটিপ উপাদানের বাম পাশে এবং লক্ষ্যমানSOE দেখাবে।

  1. CSS অ্যানিমেশন দিয়ে ফেড-ইন টুলটিপ তৈরি করুন

  2. CSS দিয়ে টুলটিপের ডান পাশে তীর তৈরি করুন

  3. CSS দিয়ে টুলটিপের উপরে তীর তৈরি করুন

  4. CSS দিয়ে ফ্লোটিং এলিমেন্টস