Подсказка не работает в соответствии с разрешением браузера

Question

Если я наведу курсор мыши, текстовое поле будет отображаться справа.Но когда я наведите курсор на последний элемент, он не работает должным образом и скрывается.

Пожалуйста, посмотрите на следующую скрипку:

JSFIDDLE

Код скрипты написан в jquery.Я хочу в angularjs .

Если у меня будет больше текстовых полей, появится горизонтальный свиток.Тогда последняя карта в том смысле (ширина div), когда она достигает последней в div, всплывающая подсказка не видна.

$('input[type="radio"]').on('change', function() {
    var className = $(this).val();
    var position;
    switch (className) {
     	case 'right':
            position = { my: 'left center', at: 'right+10 center' };
            break;
    }
    position.collision = 'none';
    
    $('input[type="text"]').tooltip('option', 'position', position);
    $('input[type="text"]').tooltip('option', 'tooltipClass', className);
});

$('#options').buttonset();
$('input[type="text"]').tooltip();
$('input[value="right"]').trigger('change');

body { padding: 20px; }


.test{
  width:100%;
  display:inline-flex;
  position : absolute;
  overflow-x:scroll;
}

input[type="text"] { margin: 50px 0 0 0px; width:177px;}

.ui-tooltip {
    background: #666;
    color: white;
    border: none;
    padding: 0;
    opacity: 1;
}
.ui-tooltip-content {
    position: relative;
    padding: 1em;
}
.ui-tooltip-content::after {
    content: '';
    position: absolute;
    border-style: solid;
    display: block;
    width: 0;
}
.right .ui-tooltip-content::after {
    top: 18px;
    left: -10px;
    border-color: transparent #666;
    border-width: 10px 10px 10px 0;
}
.left .ui-tooltip-content::after {
    top: 18px;
    right: -10px;
    border-color: transparent #666;
    border-width: 10px 0 10px 10px;
}
.top .ui-tooltip-content::after {
    bottom: -10px;
    left: 72px;
    border-color: #666 transparent;
    border-width: 10px 10px 0;    
}
.bottom .ui-tooltip-content::after {
    top: -10px;
    left: 72px;
    border-color: #666 transparent;
    border-width: 0 10px 10px;
}

<div id="options">
    <label for="right">Right</label><input type="radio" value="right" name="option" id="right" checked />
</div>

<div class="test">
    <input type="text" title="I am a tooltip!" />
    <input type="text" title="I am a tooltip!" />
    <input type="text" title="I am a tooltip!" />
    <input type="text" title="I am a tooltip!" />
    <input type="text" title="I am a tooltip!" />
     <input type="text" title="I am a tooltip!" />
      <input type="text" title="I am a tooltip!" />
</div>

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

Может кто-нибудь сказать, пожалуйста, как я могу это сделать?