У меня есть заголовок Div, который находится в верхней части страницы, и дочерний элемент Div, который является основным содержимым страницы. Там есть всплывающая подсказка, которая при расположении слишком близко к заголовку обрезается им. HTML для всплывающей подсказки:
<span class="tooltip" data-tooltip="List of rules to use for automated email marketing integration with MailChimp">
<i class="fa fa-question-circle"></i>
</span>
CSS для всплывающей подсказки:
[data-tooltip] {
position: relative;
z-index: 2;
cursor: pointer;
text-transform: none;
}
[data-tooltip]:before {
position: absolute;
bottom: 80%;
left: 50%;
margin-bottom: 5px;
margin-left: -80px;
padding: 7px;
width: 160px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color: fade-out($light-black, .1);
color: $white;
content: attr(data-tooltip);
text-align: center;
font-size: 12px;
font-weight: 300;
line-height: 1.2;
}
всплывающая подсказка: перед диапазоном CSS для заголовка:
.main-header {
height: 3rem;
background-color: #9CBB71;
}
как это выглядит: введите описание изображения здесь очень странно то, что если я сделаю заголовок непрозрачным: 0 или background-color: прозрачный, он будет выглядеть так: введите описание изображения здесь