Я использую всплывающую подсказку Bootstrap для отображения текста на некоторых кнопках на странице отображения.Все работает нормально, за исключением того, что отображение всплывающей подсказки полностью находится под нижним колонтитулом.Например,
Кнопка нажатия, выделенная синим цветом, должна давать «добавить новую запись»:
На изображении ниже показано «добавить»новая запись идет под нижним колонтитулом, вместо того, чтобы отображаться рядом с самой кнопкой
Изображение ошибки:
Код CSS идет кое-чтокак это:
.tooltip {
position: absolute;
z-index: 1070;
display: inline;
margin: 0;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
font-style: normal;
font-weight: 400;
line-height: 1.5;
text-align: left;
text-align: start;
text-decoration: none;
text-shadow: none;
text-transform: none;
letter-spacing: normal;
word-break: normal;
word-spacing: normal;
white-space: normal;
line-break: auto;
font-size: .875rem;
word-wrap: break-word;
opacity: 0;
pointer-events: none
}
.tooltip.show {
opacity: .9
}
.tooltip .arrow {
position: absolute;
display: inline;
width: .8rem;
height: .4rem
}
.tooltip .arrow::before {
position: absolute;
content: "";
border-color: transparent;
border-style: solid
}
HTML выглядит примерно так
<div class="tooltip fade bs-tooltip-bottom" role="tooltip" id="tooltip785907">
<div class="arrow">
</div>
<div class="tooltip-inner">Add a new record
</div>
</div>
Любое руководство будет высоко ценится