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

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


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

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

উদাহরণ

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