#html #css
#HTML #css
Вопрос:
У меня появляется эта всплывающая подсказка при наведении курсора мыши на значок информации рядом с заголовком. Я не могу заставить его перенести текст на следующую строку, если недостаточно места для отображения всего этого. Я перепробовал так много разных версий пробелов и переноса строк, что у меня закончились идеи.
Кроме того, IE вообще не отображает всю ширину. Я не хочу придавать моему div фиксированную ширину. Я хочу, чтобы он динамически переносился, когда в родительском файле больше нет места.
Мой желаемый результат был бы примерно таким как в IE, так и в Chrome 
.info-tooltip {
position: relative;
display: inline;
top: 1px;
cursor: defau<
white-space: pre;
}
.info-tooltip:before {
content: url("https://image.flaticon.com/icons/svg/685/685815.svg");
width: 20px;
height: 20px;
display: inline-block;
}
/* Tooltip text */
.info-tooltip .info-tooltip-text {
visibility: hidden;
background-color: #0BC6DD;
color: #fff;
border-radius: 4px;
font-size: 14px;
/* Position the tooltip text */
position: absolute;
top: 37px;
left: -50px;
display: table;
z-index: 1;
padding: 8px 8px 4px 8px ;
/* Fade in tooltip */
opacity: 0;
transition: opacity 0.3s;
-webkit-transition: opacity 0.3s;
-moz-transition: opacity 0.3s;
-ms-transition: opacity 0.3s;
-o-transition: opacity 0.3s;
transition: opacity 0.3s;
}
/* Tooltip arrow */
.info-tooltip .info-tooltip-text::after {
content: "";
position: absolute;
bottom: 100%;
left: 60px;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent #0BC6DD transparent;
}
/* Show the tooltip text when you mouse over the tooltip container */
.info-tooltip:hover .info-tooltip-text {
visibility: visible;
opacity: 1;
}
.info-tooltip .info-tooltip-text p {
padding-bottom: 4px;
margin: 0;
font-weight: 100;
} <h1>There is a tooltip next to me <i class="info-tooltip"/>
<div class="info-tooltip-text">
<p>This is the actual tooltip to be displayed. A bit longer than expected. Should wrap where necessary.</p>
</div>
</i></h1> Ответ №1:
добавлено
width: 250px;
white-space: normal;
Для .info-tooltip .info-tooltip-text p
.info-tooltip {
position: relative;
display: inline;
top: 1px;
cursor: defau<
white-space: pre;
}
.info-tooltip:before {
content: url("https://image.flaticon.com/icons/svg/685/685815.svg");
width: 20px;
height: 20px;
display: inline-block;
}
/* Tooltip text */
.info-tooltip .info-tooltip-text {
visibility: hidden;
background-color: #0BC6DD;
color: #fff;
border-radius: 4px;
font-size: 14px;
/* Position the tooltip text */
position: absolute;
top: 37px;
left: -50px;
display: table;
z-index: 1;
padding: 8px 8px 4px 8px;
/* Fade in tooltip */
opacity: 0;
transition: opacity 0.3s;
-webkit-transition: opacity 0.3s;
-moz-transition: opacity 0.3s;
-ms-transition: opacity 0.3s;
-o-transition: opacity 0.3s;
transition: opacity 0.3s;
}
/* Tooltip arrow */
.info-tooltip .info-tooltip-text::after {
content: "";
position: absolute;
bottom: 100%;
left: 60px;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent #0BC6DD transparent;
}
/* Show the tooltip text when you mouse over the tooltip container */
.info-tooltip:hover .info-tooltip-text {
visibility: visible;
opacity: 1;
}
.info-tooltip .info-tooltip-text p {
padding-bottom: 4px;
margin: 0;
font-weight: 100;
width: 250px;
white-space: normal;
} <h1>There is a tooltip next to me <i class="info-tooltip" />
<div class="info-tooltip-text">
<p>This is the actual tooltip to be displayed. A bit longer than expected. Should wrap where necessary.</p>
</div>
</i>
</h1> Комментарии:
1. Я хочу, чтобы div красиво расширялся, если экран достаточно большой, чтобы отобразить все сообщение. Я не хочу, чтобы это было исправлено на 250 пикселей.