Как изменить тултип в зависимости от позиции элемента в браузере?

Question

[Виталий]

<div class="col-sm-4 col-md-3 trimmers_slider_item">
							<h5>Аккумуляторные удлиненные мотоножницы </h5>
							<img class="protip" data-pt-delay-in="100" data-pt-delay-out="100" data-pt-width="470" data-pt-position="bottom-left" data-pt-title=".tooltip_desc19" src="img/trimmer_2.jpg" alt="">
							<div class="tooltip_desc19 hidden">
								<p>Оптимально подходит для подрезки кустарника на расстоянии или в непосредственной близости от него, а также для обработки почвопокровных растений. Длина ножевой траверсы — 50 см, а угол редуктора регулируется в диапазоне от -45° до 70°. </p>
							</div>
							<a href="#trimmerAcclongWrapper" class="popup"><button class="btn_yellow">Узнать стоимость</button></a>
						</div>

.protip-skin-default--scheme-pro.protip-container:before {
	content: "";
	position: absolute;
	top: -20px;
	left: 80px;
	width: 0;
	height: 0;
	z-index: 300;
	border-left: 40px solid transparent;
	border-right: 40px solid transparent;
	border-bottom: 20px solid #fff;
}
.protip-skin-default--scheme-pro.protip-container:after {
	content: "";
	position: absolute;
	top: -21px;
	left: 80px;
	width: 0;
	height: 0;
	border-left: 40px solid transparent;
	border-right: 40px solid transparent;
	border-bottom: 20px solid #ddd;
	z-index: 299;
}

Вопрос: как объяснить браузеру, что если тултип не влазит под картинкой, чтоб его стрелочка(:before) показывала вниз. То есть, по сути, псевдоэлементам :before, :after задать другое положение
Картинки что-то не грузятся.
https://drive.google.com/open?id=0B4MDWsTYh2cWRTNB...
https://drive.google.com/open?id=0B4MDWsTYh2cWQVNX...
https://drive.google.com/open?id=0B4MDWsTYh2cWNzFI...