CSS Tooltips

किसी museum placard की कल्पना करें जो आमतौर पर wall के खिलाफ flat folded, invisible होता है, और सिर्फ तब खुलता है जब कोई visitor किसी painting के नीचे की plaque पढ़ने के लिए पास झुकता है। एक pure-CSS tooltip भी वैसे ही काम करता है: यह :hover के 'पास झुकने' तक hidden रहता है, फिर एक positioned pseudo-element view में flip हो जाता है -- किसी JavaScript की ज़रूरत नहीं।

In this page:

Basic Tooltip Structure
:hover पर Reveal करना
Tooltip को Position करना
एक Arrow Pointer जोड़ना
Accessibility Considerations

Syntax

css

.tooltip {
  position: relative;
}
.tooltip .tooltip-text {
  visibility: hidden;
  position: absolute;
}
.tooltip:hover .tooltip-text {
  visibility: visible;
}

Basic Tooltip Structure

एक CSS-only tooltip आमतौर पर एक trigger element और एक hidden tooltip element को एक container में wrap करता है, container पर position: relative इस्तेमाल करते हुए ताकि tooltip (position: absolute) को उसके relative रखा जा सके, और tooltip को visibility: hidden या opacity: 0 पर शुरू करते हुए।

उदाहरण: The Basic Tooltip Structure

css

<style>
.tooltip {
  position: relative;
  display: inline-block;
}
.tip {
  position: absolute;
  opacity: 0;
  background: #333;
  color: white;
  padding: 6px 10px;
  border-radius: 4px;
}
.tooltip:hover .tip {
  opacity: 1;
}
</style>
<div class="tooltip">
  Hover me
  <span class="tip">Tooltip text</span>
</div>

:hover पर Reveal करना

Tooltip उसके parent की :hover state के ज़रिए tooltip element को target करके visible होता है, इसलिए किसी JavaScript event listener की ज़रूरत नहीं -- browser का अपना hover pseudo-class ही toggling करता है।

उदाहरण: Revealing on :hover

css

<style>
.tooltip {
  position: relative;
  display: inline-block;
}
.tooltip .tip {
  background: #333;
  color: white;
  padding: 6px 10px;
  border-radius: 4px;
  opacity: 0;
}
.tooltip:hover .tip {
  opacity: 1;
}
</style>
<div class="tooltip">
  Hover me
  <span class="tip">Shown via the parent's :hover</span>
</div>

Tooltip को Position करना

trigger के ऊपर, नीचे, या बगल में tooltip की exact placement top/bottom/left/right offsets से control होती है, साथ में उसे trigger की width चाहे जो भी हो horizontally center करने के लिए एक transform: translateX(-50%) trick।

उदाहरण: Positioning the Tooltip

css

<style>
.tooltip {
  position: relative;
  display: inline-block;
}
.tip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #333;
  color: white;
  padding: 6px 10px;
  border-radius: 4px;
  opacity: 0;
}
.tooltip:hover .tip {
  opacity: 1;
}
</style>
<div class="tooltip">
  Hover me
  <span class="tip">Centered above the trigger</span>
</div>

एक Arrow Pointer जोड़ना

tooltip से trigger की तरफ़ point करने वाला एक छोटा triangular arrow आमतौर पर एक ::after pseudo-element से बनाया जाता है, zero width/height और तीन sides पर transparent borders इस्तेमाल करके, एक classic CSS-triangle technique।

उदाहरण: Adding an Arrow Pointer

css

<style>
.tip {
  display: inline-block;
  background: #333;
  color: white;
  padding: 6px 10px;
  border-radius: 4px;
  position: relative;
}
.tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 20px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-top-color: #333;
}
</style>
<span class="tip">Tooltip with a triangle arrow</span>

Accessibility Considerations

सिर्फ :hover पर आधारित एक tooltip keyboard-only users के लिए invisible है, इसलिए accessible implementations :focus पर भी visibility trigger करते हैं (keyboard tab navigation के लिए) और markup को trigger को tooltip text से जोड़ने वाले एक aria-describedby attribute के साथ जोड़ते हैं।

उदाहरण: Accessibility Considerations

css

<style>
.tooltip {
  position: relative;
}
.tip {
  position: absolute;
  background: #333;
  color: white;
  padding: 6px 10px;
  border-radius: 4px;
  opacity: 0;
}
.tooltip:hover .tip,
.tooltip:focus .tip {
  opacity: 1;
}
</style>
<button class="tooltip" aria-describedby="tip1">
  Hover or Tab
  <span class="tip" id="tip1">Also visible on keyboard focus</span>
</button>

Live Example

Chapter Quiz — Complete all 14 topics to unlock

0/14 topics done

Complete these topics first:

← Previous Lesson CSS Align Next Lesson → CSS Calc Deep Dive