Доброго времени суток!
Помогите решить один вопрос сижу туплю и не понимаю что надо сделать.
Есть у меня восемь ссылок в div блоке
Код:
<div>
<center>
<span tooltip="Подсказка 1"><a href="#"><img src="../img/1.png" width="64" height="64"></a></span>
<span tooltip="Подсказка 2"><a href="#"><img src="../img/2.png" width="64" height="64"></a></span>
<span tooltip="Подсказка 3"><a href="#"><img src="../img/3.png" width="64" height="64"></a></span>
<span tooltip="Подсказка 4"><a href="#"><img src="../img/4.png" width="64" height="64"></a></span>
<span tooltip="Подсказка 5"><a href="#"><img src="../img/5.png" width="64" height="64"></a></span>
<span tooltip="Подсказка 6"><a href="#"><img src="../img/6.png" width="64" height="64"></a></span>
<span tooltip="Подсказка 7"><a href="#"><img src="../img/7.png" width="64" height="64"></a></span>
<span tooltip="Подсказка 8"><a href="#"><img src="../img/8.png" width="64" height="64"></a></span>
</center>
</div>
Для них я делаю tooltip расположенного в span. Tooltip написан на чистом HTML и CSS без каких либо JS, AJAX и тд.
Вот к ним сss
Код:
/* START TOOLTIP STYLES */
[tooltip] {
position: relative; /* opinion 1 */
}
/* Applies to all tooltips */
[tooltip]::before,
[tooltip]::after {
text-transform: none; /* opinion 2 */
font-size: .9em; /* opinion 3 */
line-height: 1;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
pointer-events: none;
position: absolute;
display: none;
opacity: 0;
}
[tooltip]::before {
content: '';
border: 5px solid transparent; /* opinion 4 */
z-index: 1001; /* absurdity 1 */
margin: 0 0 5px 0;
}
[tooltip]::after {
content: attr(tooltip); /* magic! */
/* most of the rest of this is opinion */
font-family: Helvetica, sans-serif;
text-align: center;
/*
Let the content set the size of the tooltips
but this will also keep them from being obnoxious
*/
min-width: 3em;
max-width: 21em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 1ch 1.5ch;
margin: 0 0 5px 0;
border-radius: .3ch;
box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35);
background: #333;
color: #fff;
z-index: 1000; /* absurdity 2 */
border:1px solid red;
}
/* Make the tooltips respond to hover */
[tooltip]:hover::before,
[tooltip]:hover::after {
display: block;
}
/* don't show empty tooltips */
[tooltip='']::before,
[tooltip='']::after {
display: none !important;
}
/* FLOW: UP */
[tooltip]:not([flow])::before,
[tooltip][flow^="up"]::before {
bottom: 100%;
border-bottom-width: 0;
border-top-color: #333;
}
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::after {
bottom: calc(100% + 5px);
}
[tooltip]:not([flow])::before,
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::before,
[tooltip][flow^="up"]::after {
left: 50%;
-webkit-transform: translate(-50%, -.5em);
transform: translate(-50%, -.5em);
}
/* KEYFRAMES */
@-webkit-keyframes tooltips-vert {
to {
opacity: .9;
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
}
@keyframes tooltips-vert {
to {
opacity: .9;
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
}
@-webkit-keyframes tooltips-horz {
to {
opacity: .9;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
}
}
@keyframes tooltips-horz {
to {
opacity: .9;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
}
}
/* FX All The Things */
[tooltip]:not([flow]):hover::before,
[tooltip]:not([flow]):hover::after,
[tooltip][flow^="up"]:hover::before,
[tooltip][flow^="up"]:hover::after {
-webkit-animation: tooltips-vert 900ms ease-out forwards;
animation: tooltips-vert 900ms ease-out forwards;
}
Работает всё нормально только за исключение одного НО на скрине я нарисовал восемь ссылок и при наведении мышкой появляется подсказки как и надо они отмечены зеленым цветом а вот у ссылки под номером пять tooltip появляется над первым рядом ссылок справа на рисунке отмечен красным цветом и если я пропишу перед пятой ссылкой <br> то Tooltip будет как и надо над пятой ссылкой но отображение на разных разрешениях у меня будет на так как бы мне хотелось от сюда вопрос как при автоматическом переносе ссылки перенести эту подсказку без использования в коде дополнительных переносов таких как <br> ???
PS Это случается с любой ссылкой которая переносится автоматически из-за нехватки места будь это пятая или девятая или же тринадцатая у всех у них ToolTip будет появляться на ряд выше справа то есть у пятой ссылке при расположении во втором ряду Tooltip будет в первом ряду справа у девятой ссылки расположенной в третьем ряду Tooltip будет появляться во втором ряду справа у тринадцатой ссылке расположенной в четвертом ряду Tooltip появиться в третьем ряду справа и тд.