我正在使用CSS工具提示来获取有关某些报告的信息。问题是我有5个按钮。从1st到4th可以正常工作,但是问题出在最后一个按钮上,它不显示,屏幕将其剪切。
如何使最后一个工具提示移到左侧?我正计划通过更多按钮添加更多报告,因此我想动态地做到这一点。
我的CSS是:
a.selected {
background-color:#1F75CC;
color:white;
z-index:100;
}
.messagepop {
background-color:#FFFFFF;
border:1px solid #999999;
cursor:default;
display:none;
margin-top: 15px;
position:absolute;
text-align:left;
width:394px;
z-index:50;
padding: 25px 25px 20px;
}
.labelPop {
display: block;
margin-bottom: 3px;
padding-left: 15px;
text-indent: -15px;
}
.messagepop p, .messagepop.div {
border-bottom: 1px solid #EFEFEF;
margin: 8px 0;
padding-bottom: 8px;
}
.tooltiptext {
visibility: hidden;
width: 150px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px ;
/* Position the tooltip */
position: absolute;
z-index: 1;
}
.botonesBajadas:hover .tooltiptext {
visibility: visible;
}
.botonesBajadas {
background-color: #00adee;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
而且,HTML代码是:
<a href="bajadas/ticketsAbiertos.php" class="botonesBajadas">Tickets abiertos <span class="tooltiptext">Todos los tickets que están abiertos en el momento</span></a>
<a href="#" class="botonesBajadas" id="ticketsGenerados">Tickets generados<span class="tooltiptext">Todos los tickets que se crearon entre las dos fechas</span></a>
<a href="#" class="botonesBajadas" id="ticketsCierreAdmin">Tickets cierre adminitrativo<span class="tooltiptext">Todos los tickets que están cerrados y tuvieron un cambio (change_time) entre dos fechas (se toma como Cierre Administrativo)</span></a>
<a href="#" class="botonesBajadas" id="RTsPorNodo">RTs por nodo<span class="tooltiptext">Cantidad de RTs por nodo entre dos fechas (asociados a un OTRS)</span></a>
<a href="#" class="botonesBajadas" id="CaidasPorNodo">Caídas por nodo por día<span class="tooltiptext">Cantidad de caídas por día y por nodo, con la afectación total en minutos que es duración de caída por CMs afectados (por caída)</span></a>
显示方式如下: