範囲にテキストボックスを入れたい

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>

編集、前のコード、コードは、自動補正のために添加。