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

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


টুলটিপের উপরে তীর যোগ করতে bottom CSS প্রপার্টি ব্যবহার করুন।

উদাহরণ

টুলটিপের উপরে তীর যুক্ত করতে নিচের কোডটি চালাতে পারেন:

<!DOCTYPE html> <html>    <style>       .mytooltip .mytext {          visibility: hidden;          width: 140px;          background-color: blue;          color: #fff;          z-index: 1;          top: 150%;          left: 50%;          margin-left: -60px;          text-align: center;          border-radius: 6px;          padding: 5px 0;          position: absolute;       }       .mytooltip {          position: relative;          display: inline-block;       }       .mytooltip .mytext:after {          content: "";          position: absolute;          bottom: 100%;          left: 50%;          margin-left: -10px;          border-width: 3px;          border-style: solid;          border-color: transparent transparent blue transparent;       }       .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 দিয়ে উপরে টুলটিপ সেট করুন

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

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

  4. CSS top প্রপার্টি অ্যানিমেশন সহ