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

CSS দিয়ে টুলটিপের নিচে আরো যোগ করুন


টুলটিপের নিচে আরো যোগ করতে CSS top প্রোপার্টি ব্যবহার করুন।

উদাহরণ

নিচের কোড রান করে নিচে আরো থাকা টুলটিপ যোগ করুন।

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