DGKumar Ответов: 1

Как отобразить всплывающее окно в правой части текстового поля?

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

Что я уже пробовал:

<!DOCTYPE html>


.tooltip {
    position: relative;
    display: inline-block;
    
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 10%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}



<h2>Tooltip</h2>
<p>Move the mouse over the text below:</p>

<div class="tooltip">
  
  <table class="tooltiptext"><tbody><tr><td>sasas</td></tr></tbody></table>
</div>

1 Ответов

Рейтинг:
6

DGKumar 

<html><head></head><body style="text-align:center;"><!DOCTYPE html>

<style>
.tooltip {
    position: relative;
    display: inline-block;
    
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 220px;
    height:200px;
    background-color: #ccc;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: -5px;
    left: 105%;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 6%;
    right: 100%;
    margin-top: -5px;
    border-width: 7px;
    border-style: solid;
    border-color: transparent #ccc transparent transparent;
}
.tooltip:hover .tooltiptext {
    visibility: visible;
}
</style>


<h2>Right Tooltip w/ Left Arrow</h2>

<div class="tooltip"><input type="text"> <table class="tooltiptext"><tbody><tr><td></td></tr><tr></tr></tbody></table>
  
</div>
<input type="text">


</body></html>

Richard MacCutchan

Теперь мы будем считать, что публикация этого означает, что вы исправили свою проблему.