CSS দিয়ে টুলটিপ তৈরি করার পদ্ধতি

একটি টুলটিপ অতিরিক্ত তথ্য দেখানোর জন্য ব্যবহৃত হয়। এটি ওয়েব পেজে দর্শক যখন মাউস পয়েন্টার একটি এলিমেন্টের উপরে নিয়ে যায় তখন দৃশ্যমান হয়।

উদাহরণ

নিচের কোডটি CSS ব্যবহার করে টুলটিপ তৈরি করার পদ্ধতি দেখায়:

<!DOCTYPE html>
<html>
<style>
body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    text-align: center;
}
.toolTip {
    position: relative;
    display: inline-block;
    border-bottom: 3px double rgb(255, 0, 0);
}
.toolTip .toolText {
    visibility: hidden;
    width: 160px;
    background-color: #721cd4;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    top: -35px;
    left: -10px;
    z-index: 1;
}
.toolTip:hover .toolText {
    visibility: visible;
}
</style>
<body>
<h1>Css tooltip example</h1>
<div class="toolTip"> Hover over me <span class="toolText">Some toolTip text</span> </div>
<h2>Hover over the above text to see the tooltip</h2>
</body>
</html>

আউটপুট

উপরোক্ত কোড নিচের আউটপুটটি তৈরি করবে:

"Hover over me" টেক্সটের উপরে হোভার করলে: