সিএসএস এইচটিএমএল জাভাস্ক্রিপ্ট পিএইচপি এসকিউএল জেকুয়েরি বুটস্ট্রাপ সি প্রোগ্রামিং
ফোরাম
×

সিএসএস টিউটোরিয়াল

হোম-HOME পরিচিতি-Introduction গঠনপ্রণালী-Syntax ব্যবহার পদ্ধতি-Use কালার-Color ব্যাকগ্রাউন্ড-Background বর্ডার-Border মার্জিন-Margin প্যাডিং-Padding উচ্চতা/প্রস্থ-Height/Width বক্সমডেল-BoxModel আউটলাইন-Outline টেক্সট-Text ফন্ট-Font লিংক-Link লিস্ট-List টেবিল-Table প্রদর্শনী-Display সর্বোচ্চ উচ্চতা-Maxwidth পজিশন-Position ওভারফ্লো-Overflow ফ্লট-Float ইনলাইন-ব্লক-Inlineblock এলাইন-Align কম্বিন্যাটর-Combinator সুডো-ক্লাস-PseudoClass সুডো-এলিমেন্ট-PseudoElement প্রোপার্টি-Opacity ন্যাভিগেশনবার-NavigationBar ড্রপডাউন-Dropdown টুলটিপ-Tooltip ইমেজ গ্যালারী-ImageGallery ইমেজ স্প্রাইট-ImageSprite এট্রিবিউট সিলেক্টর-AttrSelector ফর্ম-Form কাউন্টার-Counter

সিএসএস-৩

ভূমিকা-Introduction রাউন্ডেড কর্নার-RoundedCorner বর্ডারইমেজ-Border Image ব্যাকগ্রাউন্ড-Background কালার-Color গ্র্যাডিয়েন্ট-Gradient স্যাডো-Shadow টেক্সট-Text 3ফন্ট-Font 2D ট্রান্সফর্ম-Transform 3D ট্রান্সফর্ম-Transform ট্রানজিশন-Transition এনিমেশন-Animation ইমেজ-Image বাটন-Button পেজিনেশন-Pagination মাল্টি-কলাম-MultColumn ইউজার ইন্টারফেস-UserInterface বক্স সাইজিং-BoxSizing ফ্লেক্সবক্স-Flexbox মিডিয়া কুয়েরি-MediaQuery মিডিয়া কুয়েরি উদাহরণ

সিএসএস রেসপন্সিভ

রেসপন্সিভ পরিচিতি-Introduction রেসপন্সিভ ভিউপোর্ট-Viewport রেসপন্সিভ গ্রাইড ভিউ-Grid View রেসপন্সিভ মিডিয়া কুয়েরি-Media Query রেসপন্সিভ ইমেজ-Image রেসপন্সিভভিডিও-Video ফ্রেমওয়ার্ক-Frameworks

সিএসএস রেফারেন্স

রেফারেন্স-Reference সিলেক্টর-Selector ফাংশন-Function রেফারেন্স আউরাল-ReferenceAural ওয়েব সেফ ফন্ট-WebSafeFont এনিমেটেবল-Animatable ইউনিট-Unit PX-EM কনভার্টার-Converter কালার-Color কালার ভ্যালু-ColorValue ডিফল্ট ভ্যালু-DefaultValue ব্রাউজার সাপোর্ট-BrowserSupport

 

সিএসএস টুলটিপ


টুলটিপের উদাহরণ

কোন এলিমেন্টের টেক্সটের উপর ইউজার মাউস পয়েন্টার নিয়ে গেলে টেক্সট সম্পর্কে অতিরিক্ত কোন তথ্য দেখানোকে টুলটিপ বলে। যেমনঃ

উপরে টুলটিপ টেক্সট
ডানে টুলটিপ টেক্সট
নিচে টুলটিপ টেক্সট
বামে টুলটিপ টেক্সট


বেসিক টুলটিপ

একটি টুলটিপ তৈরি করার পদ্ধতিঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<style>
.tooltip {
    border-bottom: 1px dotted black;
    display: inline-block;
    position: relative;
}
.tooltip .tooltiptext {
    background-color: teal;
    border-radius: 6px;
    color: white;
    padding: 5px 0;
    position: absolute;
    text-align: center;
    visibility: hidden;
    width: 120px;
    z-index: 1;
}
.tooltip:hover .tooltiptext {
    visibility: visible;
}
</style>
<head>
<body style="text-align:center;">

<p>নিচের টেক্সটে মাউস আনুনঃ</p>
<div class="tooltip">মাউস আনুন
  <span class="tooltiptext">টুলটিপ টেক্সট</span>
</div>

</body>
</html>

ফলাফল



উদাহরণের বর্ণনা

এইচটিএমএলঃ
একটি কন্টেইনার এলিমেন্ট হিসেবে <div> এলিমেন্টকে ব্যবহার করা হয়েছে এবং এতে "tooltip" ক্লাসটি যোগ করা হয়েছে।

span এলিমেন্টে class="tooltiptext" ব্যবহার করা হয়েছে এবং টুলটিপ টেক্সট রাখা হয়েছে।

সিএসএসঃ
tooltipক্লাসটিতে position:relative ব্যবহার করা হয়েছে। কারণ আমরা টুলটিপ টেক্সটের অবস্থান নির্ধারণের ক্ষেত্রে position:absolute ব্যবহার করবো।

tooltiptext ক্লাসটির মাধ্যমে টুলটিপ টেক্সটকে হাইড করা হয়েছে এবং টুলটিপ টেক্সটের আরো কিছু স্টাইল করা হয়েছে।

class="tooltip" যুক্ত <div> এলিমেন্টে :hover সিলেক্টরটি যোগ করা হয়েছে। এর ফলে আমরা <div> এলিমেন্টের উপর মাউস নিয়ে গেলে .tooltiptext ক্লাসের visibility প্রোপার্টির ভ্যালু visible সেট হয়ে যাবে।


টুলটিপের অবস্থান নির্ধারণ

ডানদিকে টুলটিপ

এই উদাহরণে, আমরা টুলটিপ টেক্সটকে ডান পাশে দেখানোর জন্য left:105% ব্যবহার করেছি এবং টুলটিপ টেক্সটকে হোভারএবল টেক্সটের মাঝামাঝি দেখানোর জন্য top:-5px ব্যবহার করেছি।

আপনি যদি টুলটিপ টেক্সটের প্যাডিংয়ের ভ্যালু বাড়ান অথবা কমান তাহলে, top প্রোপার্টির ভ্যালুতেও একই মান ব্যবহার করতে হবে। একই মান ব্যবহার না করলে টুলটিপ টেক্সট মাঝামাঝি থাকবে না।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<style>
.tooltip {
    border-bottom: 1px dotted black;
    display: inline-block;
    position: relative;
}
.tooltip .tooltiptext {
    background-color: teal;
    border-radius: 6px;
    color: whitesmoke;
    padding: 5px 0;
    text-align: center;
    visibility: hidden;
    width: 120px;
    left: 105%;
    position: absolute;
    top: -5px;
    z-index: 1;
}
.tooltip:hover .tooltiptext {
    visibility: visible;
}
</style>
<head>
<body style="text-align:center;">

<h2>ডানদিকে টুলটিপ</h2>
<p>নিচের টেক্সটে মাউস আনুনঃ</p>
<div class="tooltip">মাউস আনুন
  <span class="tooltiptext">টুলটিপ টেক্সট</span>
</div>

</body>
</html>

ফলাফল




উপরেরদিকে টুলটিপ

যদি আপনি টুলটিপকে উপরে দেখাতে চান তাহলে bottom: 100% ব্যবহার করতে হবে এবং আমরা margin-left: -60px ব্যবহার করেছি টুলটিপ টেক্সটকে মাঝামাঝি দেখানোর জন্য। -৬০ পিক্সেল ব্যবহার করার কারণ টুলটিপ টেক্সটের প্রস্থ ১২০ পিক্সেল, আমরা এর প্রস্থের অর্ধেক নিয়েছি।

আপনি যদি টুলটিপ টেক্সটের প্রস্থ ১০০ পিক্সেল সেট করেন তাহলে মার্জিন সেট করতে হবে -৫০ পিক্সেল।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<style>
.tooltip {
    border-bottom: 1px dotted black;
    display: inline-block;
    position: relative;
}
.tooltip .tooltiptext {
    background-color: teal;
    border-radius: 6px;
    color: whitesmoke;
    padding: 5px 0;
    text-align: center;
    visibility: hidden;
    width: 120px;
    bottom: 100%;
    left: 50%;
    margin-left: -60px;
    position: absolute;
    z-index: 1;
}
.tooltip:hover .tooltiptext {
    visibility: visible;
}
</style>
<head>
<body style="text-align:center;">

<h2>উপরেরদিকে টুলটিপ</h2>
<p>নিচের টেক্সটে মাউস আনুনঃ</p>
<div class="tooltip">মাউস আনুন
  <span class="tooltiptext">টুলটিপ টেক্সট</span>
</div>

</body>
</html>

ফলাফল




নিচেরদিকে টু্লটিপ

টুলটিপ টেক্সটকে নিচেরদিকে দেখাতে চাইলে আপনাকে bottom: 100% এর পরিবর্তে top: 100% ব্যবহার করতে হবেঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<style>
.tooltip {
    border-bottom: 1px dotted black;
    display: inline-block;
    position: relative;
}
.tooltip .tooltiptext {
    background-color: teal;
    border-radius: 6px;
    color: whitesmoke;
    padding: 5px 0;
    text-align: center;
    visibility: hidden;
    width: 120px;
    top: 100%;
    left: 50%;
    margin-left: -60px;
    position: absolute;
    z-index: 1;
}
.tooltip:hover .tooltiptext {
    visibility: visible;
}
</style>
<head>
<body style="text-align:center;">

<h2>নিচেরদিকে টুলটিপ</h2>
<p>নিচের টেক্সটে মাউস আনুনঃ</p>
<div class="tooltip">মাউস আনুন
  <span class="tooltiptext">টুলটিপ টেক্সট</span>
</div>

</body>
</html>

ফলাফল




টুলটিপে অ্যাঁরোর ব্যবহার

নিচেরদিকে অ্যাঁরো

আমরা অ্যাঁরোকে নিচেরদিকে রাখার জন্য top: 100% ব্যবহার করেছি এবং left: 50% ব্যবহার করে অ্যাঁরোকে মাঝামাঝি নিয়ে এসেছি। border-width: 5px দ্বারা অ্যাঁরোর সাইজ নির্ধারণ করা হয়েছে, অ্যাঁরোর সাইজ নির্ধারণ করার পর একে মাঝামাঝি রাখার জন্য margin-left: -5px ব্যবহার করেছি।

লক্ষণীয় বিষয় হচ্ছে উভয় প্রোপার্টির মান সমানভাবে দিতে হবে, ১০পিক্সেল বর্ডার দিলে মার্জিনও -১০পিক্সেল ব্যবহার করতে হবে। border-color: black transparent transparent transparent; সেট করতে হবে।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<style>
.tooltip {
    border-bottom: 1px dotted black;
    display: inline-block;
    position: relative;
}
.tooltip .tooltiptext {
    background-color: teal;
    border-radius: 6px;
    bottom: 150%;
    color: whitesmoke;
    left: 50%;
    margin-left: -60px;
    padding: 5px 0;
    position: absolute;
    text-align: center;
    visibility: hidden;
    width: 120px;
    z-index: 1;
}
.tooltip .tooltiptext::after {
    border-color: teal transparent transparent transparent;
    border-style: solid;
    border-width: 5px;
    content: "";
    left: 50%;
    margin-left: -5px;
    position: absolute;
    top: 100%;
}
.tooltip:hover .tooltiptext {
    visibility: visible;
}
</style>
<head>
<body style="text-align:center;">

<h2>টুলটিপের নিচেরদিকে অ্যাঁরো</h2>
<div class="tooltip">মাউস আনুন
  <span class="tooltiptext">টুলটিপ টেক্সট</span>
</div>

</body>
</html>

ফলাফল




উপরেরদিকে অ্যাঁরো

উপরের দিকে অ্যাঁরো দেখানোর জন্য top: 100% এর পরিবর্তে bottom: 100% ব্যবহার করতে হবে এবং border-color: transparent transparent black transparent; সেট করতে হবে।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<style>
.tooltip {
    border-bottom: 1px dotted black;
    display: inline-block;
    position: relative;
}
.tooltip .tooltiptext {
    background-color: teal;
    border-radius: 6px;
    top: 150%;
    color: whitesmoke;
    left: 50%;
    margin-left: -60px;
    padding: 5px 0;
    position: absolute;
    text-align: center;
    visibility: hidden;
    width: 120px;
    z-index: 1;
}
.tooltip .tooltiptext::after {
    border-color: transparent transparent teal transparent;
    border-style: solid;
    border-width: 5px;
    bottom: 100%;
    content: "";
    left: 50%;
    margin-left: -5px;
    position: absolute;
}
.tooltip:hover .tooltiptext {
    visibility: visible;
}
</style>
<head>
<body style="text-align:center;">

<h2>টুলটিপের উপরেরদিকে অ্যাঁরো</h2>
<div class="tooltip">মাউস আনুন
  <span class="tooltiptext">টুলটিপ টেক্সট</span>
</div>

</body>
</html>

ফলাফল




বামদিকে অ্যাঁরো

বামদিকে অ্যাঁরো দেখানোর জন্য top: 50%, right: 100% এবং border-color: transparent black transparent transparent ব্যবহার করতে হবে।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<style>
.tooltip {
    border-bottom: 1px dotted black;
    display: inline-block;
    position: relative;
}
.tooltip .tooltiptext {
    background-color: teal;
    border-radius: 6px;
    top: -5px;
    color: whitesmoke;
    left: 110%;
    padding: 5px 0;
    position: absolute;
    text-align: center;
    visibility: hidden;
    width: 120px;
    z-index: 1;
}
.tooltip .tooltiptext::after {
    border-color: transparent teal transparent transparent;
    border-style: solid;
    border-width: 5px;
    content: "";
    margin-top: -5px;
    position: absolute;
    right: 100%;
    top: 50%;
}
.tooltip:hover .tooltiptext {
    visibility: visible;
}
</style>
<head>
<body style="text-align:center;">

<h2>টুলটিপের বামদিকে অ্যাঁরো</h2>
<div class="tooltip">মাউস আনুন
  <span class="tooltiptext">টুলটিপ টেক্সট</span>
</div>

</body>
</html>

ফলাফল




ডানদিকে অ্যাঁরো

বামদিকে অ্যাঁরো দেখানোর জন্য top: 50%, left: 100% এবং border-color: transparent transparent transparent black ব্যবহার করতে হবে।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<style>
.tooltip {
    border-bottom: 1px dotted black;
    display: inline-block;
    position: relative;
}
.tooltip .tooltiptext {
    background-color: teal;
    border-radius: 6px;
    top: 150%;
    color: whitesmoke;
    left: 50%;
    margin-left: -60px;
    padding: 5px 0;
    position: absolute;
    text-align: center;
    visibility: hidden;
    width: 120px;
    z-index: 1;
}
.tooltip .tooltiptext::after {
    border-color:  transparent transparent transparent teal;
    border-style: solid;
    border-width: 5px;
    content: "";
    bottom: 100%;
    content: "";
    left: 50%;
    margin-left: -5px;
    position: absolute;
}
.tooltip:hover .tooltiptext {
    visibility: visible;
}
</style>
<head>
<body style="text-align:center;">

<h2>টুলটিপের ডানদিকে অ্যাঁরো</h2>
<div class="tooltip">মাউস আনুন
  <span class="tooltiptext">টুলটিপ টেক্সট</span>
</div>

</body>
</html>

ফলাফল




টুলটিপ এনিমেশন

টুলটিপ টেক্সটে এনিমেশন যোগ করার পদ্ধতি হচ্ছে transition প্রোপার্টি ও opacity প্রোপার্টির ব্যবহারঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<style>
.tooltip {
    border-bottom: 1px dotted black;
    display: inline-block;
    position: relative;
}
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: teal;
    color: whitesmoke;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 100%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 3s;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
</style>
<head>
<body style="text-align:center;">

<h2>টুলটিপের ডানদিকে অ্যাঁরো</h2>
<p>নিচের টেক্সটের উপর মাউস নিলে টুলটিপ টেক্সট  সম্পূর্ন দৃশ্যমান হতে ৩ সেকেন্ড সময় নিবে</p>
<div class="tooltip">মাউস আনুন
  <span class="tooltiptext">টুলটিপ টেক্সট</span>
</div>

</body>
</html>

ফলাফল