Задать вопрос

Korokolo

Комментарии

  • Как сделать два одновременных тултипа на один блок?

    @Korokolo Автор вопроса
    Ankhena, добавил css
    Написано

  • Как сделать два одновременных тултипа на один блок?

    @Korokolo Автор вопроса
    Вадим, Добавил CSS
    Написано

  • Как сделать два одновременных тултипа на один блок?

    @Korokolo Автор вопроса
    HTML

    БЛОК
    СОДЕРЖАНИЕ ТУЛТИПА:


    CSS
    #tooltip9{
    display: inline-block;
    position: relative;
    background-color: #888a8b;
    color: white;
    width: 100%;
    text-align: center;
    border-color: white;
    border-style: solid;
    border-width:0px 0px 0.00001px 0px
    }
    media screen and (max-width: 780px){#tooltip9{
    display: inline-block;
    position: relative;
    background-color: #888a8b;
    color: black;
    width: 100%;
    text-align: center;
    }}
    #tooltip9 #tooltiptext9{
    visibility: hidden;
    width: 317%;
    color: black;
    border-radius: 1px;
    padding: 15px 15px 15px 35px;
    text-align: left;
    position: absolute;
    z-index: 100;
    top:0%;
    left: 200.5%;
    margin-left: -100%;
    background-color:#FFFFFF;
    column-count: 3;
    box-shadow: 0 0 0 100vh #9D999980;}

    media screen and (max-width: 780px){#tooltip9 #tooltiptext9{
    visibility: hidden;
    display: none;
    }}
    #tooltip9 #tooltiptext9::after {
    left: 11%;
    margin-left: -5%;
    content: " ";
    position: absolute;
    top: 7px;
    left: 5%; /* To the right of the tooltip */
    margin-top: -5px;
    border-width: 19px;
    border-style: solid;
    border-color: transparent transparent transparent #888a8b;}

    media screen and (max-width: 780px){#tooltip9 #tooltiptext9::after {content: " ";
    position: absolute;
    top: 1%; /* At the bottom of the tooltip */
    left: 1%;
    margin-left: -5px;
    border-width: 20px 161px 1px 161px ;
    border-style: solid;
    border-color: black transparent transparent
    transparent;}}
    #tooltip9:hover #tooltiptext9 {
    visibility: visible
    }

    Вот сейчас при наведении на блок появляется справа тултип с информацией. Суть собственно в чем. Этот тултип с тенью. Эта тень в свою очередь перекрывает блок.
    Мне нужно чтобы блок был виден четко и не покрыт этой тенью. Я вижу выход в виде создания дополнительного тултипа который будет перекрывать блок поверх тени от первого существующего тултипа. Если есть вариант то как мне может сделать чтобы при наведении данный блок может становился выше тултипа по слою .
    Написано