diff --git a/css/inventory.php b/css/inventory.php
index 0b4dd74c7..a47c01b98 100644
--- a/css/inventory.php
+++ b/css/inventory.php
@@ -42,6 +42,11 @@
 .arrow_left:after { border-color: rgba(255, 255, 255, 0); border-right-color: #ffffff; border-width: 15px; top: 15px; margin-top: -15px; } 
 .arrow_left:before { border-color: rgba(0, 0, 0, 0); border-right-color: #000000; border-width: 16px; top: 15px; margin-top: -16px; }
 
+.arrow_right { position: relative; background: #ffffff; border: 1px solid #000000; }
+.arrow_right:after, .arrow_right:before { left: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; }
+.arrow_right:after { border-color: rgba(255, 255, 255, 0); border-left-color: #ffffff; border-width: 15px; top: 15px; margin-top: -15px; }
+.arrow_right:before { border-color: rgba(0, 0, 0, 0); border-left-color: #000000; border-width: 16px; top: 15px; margin-top: -16px; }
+
 .no-close .ui-dialog-titlebar-close {display: none;}
 
 @keyframes loading{
diff --git a/scripts/common.js b/scripts/common.js
index 84efcf928..d55c6454a 100644
--- a/scripts/common.js
+++ b/scripts/common.js
@@ -1138,10 +1138,16 @@ function bindmaptooltips(){
 		var cx2=parseInt(coor[2])+parseInt(pos.left)
 		var cy1=parseInt(coor[1])+parseInt(pos.top);
 		var cy2=parseInt(coor[3])+parseInt(pos.top);
+		var tooltipWidth=300;
+		var arrowClass='arrow_left';
+		if(tx+tooltipWidth>$(window).width()){
+			tx=pos.left+parseInt(coor[0])-tooltipWidth-17;
+			arrowClass='arrow_right';
+		}
 		var tooltip=$('<div />').css({
 			'left':tx+'px',
 			'top':ty+'px'
-		}).addClass('arrow_left border cabnavigator tooltip').attr('id','tt').append('<span class="ui-icon ui-icon-refresh rotate"></span>');
+		}).addClass(arrowClass+' border cabnavigator tooltip').attr('id','tt').append('<span class="ui-icon ui-icon-refresh rotate"></span>');
 		var id=$(this).attr('href');
 		var startType=id.lastIndexOf('?')+1;
 		var endType=id.lastIndexOf('=');