Html: всплывающая подсказка - скрытый элемент behing div на разделенном экране с прокруткой (необходимо сохранить «overflow-y: auto» в родительском контейнере) - PullRequest
Новая
       21

Html: всплывающая подсказка - скрытый элемент behing div на разделенном экране с прокруткой (необходимо сохранить «overflow-y: auto» в родительском контейнере)

0 голосов
/ 11 мая 2019

Я хотел бы добавить всплывающую подсказку внутри разделенного экрана.Я пробовал много комбинаций, подобных этой одна , но все они не удалось.Моя подсказка всегда скрыта за вторым «экраном»

Вот мой код пока 

<!DOCTYPE html>

<style>
a-leftcolumn {
    width: 8%;
    background: #EFF0F1;
    overflow-y: auto;
    overflow-x: scroll;
    position: absolute;
    top: 0px;
    left: 2px;
    bottom: 0px;
    padding-left: 3px;
    font-size: 10px;
}


a-main {
    width: 90%;
    overflow: auto;
    position: absolute;
    top: 0px;
    left: 9%;
    bottom: 0px;
}

/*  tooltip   https://stackoverflow.com/questions/39146047/display-tooltip-when-container-overflow-is-hidden*/

.has-tooltip {
    /*position: relative;*/
    display: inline;
}

.tooltip-wrapper {
    position: absolute;
    visibility: hidden;
}

.has-tooltip:hover .tooltip-wrapper {
    visibility: visible;
    opacity: 0.7;
    /*top: 30px;*/
    /*left: 50%;*/
    /*margin-left: -76px;*/
    /* z-index: 999; defined above with value of 5 */
}

.tooltip {
    display: block;
    position: relative;
    top: 2em;
    right: 30%;
    width: 140px;
    height: 96px;
    /*margin-left: -76px;*/
    color: #FFFFFF;
    background: #000000;
    line-height: 96px;
    text-align: center;
    border-radius: 8px;
    box-shadow: 4px 3px 10px #800000;
}

.tooltip:after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -8px;
    width: 0;
    height: 0;
    border-bottom: 8px solid #000000;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
}

/*  end tooltip  */
</style>

<body>


<a-leftcolumn>


    <a class="has-tooltip" href="#">Hover me for Tooltip
        <span class="tooltip-wrapper"><span class="tooltip">Tooltip</span></span></a>


</a-leftcolumn>


<a-main>
    Some text
</body>

</html>

Ответы [ 2 ]

1 голос
/ 12 мая 2019

Если вам нужна прокрутка в левом столбце, лучше всего найти способ, чтобы всплывающая подсказка существовала вне элемента - не как ребенок, а как брат или сестра. 

<body>
    <tooltip></tooltip>
    <left-column></left-column>
    <right-column></right-column>
</body>
0 голосов
/ 11 мая 2019

Изменить a-leftcolumn переполнение на visible; Подсказка скрыта из-за установленных вами правил overflow. Переполнение, как правило, скрывает содержимое внутри элемента, если вы не установите его на visible, что также является значением по умолчанию, поэтому вы, вероятно, можете полностью удалить это правило. 

<!DOCTYPE html>

<style>
a-leftcolumn {
    width: 8%;
    background: #EFF0F1;
    overflow: visible; /* Change overflow to VISIBLE */
    position: absolute;
    top: 0px;
    left: 2px;
    bottom: 0px;
    padding-left: 3px;
    font-size: 10px;
}


a-main {
    width: 90%;
    overflow: auto;
    position: absolute;
    top: 0px;
    left: 9%;
    bottom: 0px;
}

/*  tooltip   https://stackoverflow.com/questions/39146047/display-tooltip-when-container-overflow-is-hidden*/

.has-tooltip {
    /*position: relative;*/
    display: inline;
}

.tooltip-wrapper {
    position: absolute;
    visibility: hidden;
}

.has-tooltip:hover .tooltip-wrapper {
    visibility: visible;
    opacity: 0.7;
    /*top: 30px;*/
    /*left: 50%;*/
    /*margin-left: -76px;*/
    /* z-index: 999; defined above with value of 5 */
}

.tooltip {
    display: block;
    position: relative;
    top: 2em;
    right: 30%;
    width: 140px;
    height: 96px;
    /*margin-left: -76px;*/
    color: #FFFFFF;
    background: #000000;
    line-height: 96px;
    text-align: center;
    border-radius: 8px;
    box-shadow: 4px 3px 10px #800000;
}

.tooltip:after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -8px;
    width: 0;
    height: 0;
    border-bottom: 8px solid #000000;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
}

/*  end tooltip  */
</style>

<body>


<a-leftcolumn>


    <a class="has-tooltip" href="#">Hover me for Tooltip
        <span class="tooltip-wrapper"><span class="tooltip">Tooltip</span></span></a>


</a-leftcolumn>


<a-main>
    Some text
</body>

</html>
...