ఎలా సృష్టించాలి: టూల్టిప్పెక్ట్

ఎలా టూల్టిప్పెక్ట్ సృష్టించాలి

మొదటి చర్య - హెచ్ఎంఎల్ జోడించండి

<div class="tooltip">నాకు హోవర్ చేయండి
  <span class="tooltiptext">Tooltip text</span>
</div>

రెండవ చర్య - సిఎస్ఎస్ జోడించండి

/* టూల్టిప్పెక్ట్ కంటైనర్ */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* మీరు హోవర్ టెక్స్ట్లో డాట్లైన్ బార్డర్ జోడించాలి */
}
/* టూల్టిప్పెక్ట్ టెక్స్ట్ */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  /* టూల్టిప్పెక్ట్ టెక్స్ట్ స్థానాన్ని నిర్ణయిస్తుంది */
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  /* టూల్టిప్పెక్ట్ ప్రవేశం చేస్తుంది */
  opacity: 0;
  transition: opacity 0.3s;
}
/* టూల్టిప్పెక్ట్ ఆర్క్ */
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}
/* మీరు టూల్టిప్టెక్ట్ కంటైనర్ పైన మౌస్ పెట్టినప్పుడు టూల్టిప్టెక్ట్ టెక్స్ట్ చూపుతుంది */
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

స్వయంగా ప్రయత్నించండి

సంబంధిత పేజీ

教程：CSS 工具提示

教程：ఎలా పప్ అప్ విండోను సృష్టించాలి

教程：如何创建模态