CSS工具提示未显示全部

时间:2018-09-14 17:29:58

标签: css

我正在使用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>

显示方式如下:

enter image description here

0 个答案:

没有答案