Я хочу поставить текстовое поле в диапазоне

Question

Я создал слой по событию onclick.

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

function tooltip(thechosenone) { 
 
    $('.toolTip').each(function(index) { 
 
    if ($(this).attr("id") == thechosenone) { 
 
     $(this).show(200); 
 
    } 
 
    }); 
 
}

.toolTip { 
 
    position: absolute; 
 
    width: 300px; 
 
    top: -10px; 
 
    display: none; 
 
    background-color: #f0ce93; 
 
    white-space: pre-line; 
 
    border-radius: 15px 15px 15px 15px; 
 
    -moz-border-radius: 15px 15px 15px 15px; 
 
    -webkit-border-radius: 15px 15px 15px 15px; 
 
    border: 2px dotted #208033; 
 
    padding: 5px 10px; 
 
    font-size: 17px; 
 
    line-height: 170%; 
 
}

<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script> 
 
<div onclick="tooltip('ss')">1234</div> 
 
<div id="ss" class='toolTip'> 
 
    <a href='#' target='_blank'>1234</a> 
 
</div>

Answer 1

function tooltip(thechosenone) { 
 
    $('.toolTip').each(function(index) { 
 
      if ($(this).attr("id") == thechosenone) { 
 
       $(this).show(200);    
 
      } 
 
     }); 
 
// this will automatically adjust when -ve value is specified. 
 
if(parseInt($(".toolTip").css("top")) <= -1) { 
 
    $(".toolTip").css({'top':'0%'}); 
 
    } 
 
}

.toolTip { 
 
     position:absolute; 
 
     width:300px; 
 
     top:-50px; 
 
     display:none; 
 
     background-color: #f0ce93; 
 
     white-space:pre-line; 
 
     border-radius: 15px 15px 15px 15px; 
 
     -moz-border-radius: 15px 15px 15px 15px; 
 
     -webkit-border-radius: 15px 15px 15px 15px; 
 
     border: 2px dotted #208033; 
 
     padding : 5px 10px; 
 
     font-size:17px; 
 
     line-height:170%; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div onclick="tooltip('ss')">1234</div> 
 
<div id="ss" class='toolTip'> 
 
<a href='#' target='_blank'>1234</a> 
 
</div>

Отредактировано, предыдущий код, код добавляется для автоматической коррекции.