Problema com limite da página

Donghaki · Dezembro 1, 2018

Pessoal, sou meio newbie na área, e tô voltando com um projeto antigo que foi desenvolvido por alguns amigos junto a mim.

O projeto, resumindo, é um simulador de habilidades. Na página principal temos quatro botões onde, um aumenta o nível da habilidade para o máximo, o outro aumenta de um em um, e os outros dois tem essa mesma função só que diminuindo.

O problema começa aí... tínhamos criado uma ferramenta (acho que é tooltip que chama), onde você passaria o mouse em cima dos três últimos botões, e abriria uma caixinha flutuante mostrando a descrição da habilidade (nível, mana necessária, resfriamento e afins), só que ao chegar no botão que fica no parte direita, a caixa não se adapta e vira o lado para que a descrição possa ser mostrada, ao invés disso, ela entra atrás da barra de rolagem e fica cortada, isso também acontece no final da página, quando a caixinha mostra duas descrições da habilidade.

Gostaria de saber se há algum modo de tornar a ferramenta adaptativa, para quando chegar nesses "extremos" da página, a caixa mudar o lado para que o usuário possa ver o que está escrito.

Basicamente, todo o código dela dentro do html/css é este:

#hintbox{
opacity: 0.95;
display: none;
position: fixed;
height: 450px;
width: 250px;
font-size: 10 px;
background-color: #161616;
color: #fff;
padding: 8px;
border-radius:9px;
text-align: left;
word-wrap: break-word;
font-family:Verdana;
}

$(document).ready(function () {
$('.downArrow,.upArrow,.dupArrow').mousemove(function (e) {
if (popUPCheck($(this).attr('nmbr'), $(this).attr('class')))
$('#hintbox').html(popUP($(this).attr('nmbr'), $(this).attr('class'))).show();
$('#hintbox').css('top', e.clientY + 15).css('left', e.clientX + 15);
})
.mouseout(function () {
$('#hintbox').hide();
});
});

Também tem uma parte em javascript

function popUP(lvl, arrow) {
var CDHere = CDValue;
if(lvl == 16 && chosenClass == "Warrior"){
CDHere = 1;
}
var lastCheck = maxPoints[lvl] - 1;

if(lastCheck<0){
lastCheck = 0;
}
var name = "<div class='title'>" + skillDescription[lvl] + "</div>";
var currentLevel = "<div class='yellow'>[Nível atual]</div> Nível necessário : " + skillLevel[lvl][skillPoint[lvl] - 1];
var nextLevel = "<div class='green'>[Próximo nível]</div> Nível necessário : " + skillLevel[lvl][skillPoint[lvl]];
var skilldesc = "<div class='info'>" + skillInfo[lvl][skillPoint[lvl] - 1] + "</div>";
var mpcurrent = "Mana necessária : " + mp[lvl][skillPoint[lvl] - 1];
var cdcurrent = "Resfriamento : " + (CDHere * cd[lvl][skillPoint[lvl] - 1]).toFixed(0) + " sec";
var castingcurrent = "Tempo de lançamento : " + cast[lvl][skillPoint[lvl] - 1] + " sec";
var skilldescnext = "<div class='info'>" + skillInfo[lvl][skillPoint[lvl]] + "</div>";
var mpnext = "Mana necessária : " + mp[lvl][skillPoint[lvl]];
var cdnext = "Resfriamento : " + (CDHere * cd[lvl][skillPoint[lvl]]).toFixed(0) + " sec";
var castingnext = "Tempo de lançamento : " + cast[lvl][skillPoint[lvl]] + " sec";
var previousLevel = "<div class='red'>[Nível anterior]</div> Nível necessário : " + skillLevel[lvl][skillPoint[lvl] - 2]
var skilldescPrev = "<div class='info'>" + skillInfo[lvl][skillPoint[lvl] - 2] + "</div>";
var mpPrev = "Mana necessária : " + mp[lvl][skillPoint[lvl] - 2];
var cdPrev = "Resfriamento : " + (CDHere * cd[lvl][skillPoint[lvl] - 2]).toFixed(0) + " sec";
var castingPrev = "Tempo de lançamento : " + cast[lvl][skillPoint[lvl] - 2] + " sec";
var lastLevel = "<div class='green'>[Próximo Nível]</div> Nível necessário : " + skillLevel[lvl][lastCheck];
var skilldescLast = "<div class='info'>" + skillInfo[lvl][lastCheck] + "</div>";
var mpLast = "Mana necessária : " + mp[lvl][lastCheck];
var cdLast = "Resfriamento : " + (CDHere * cd[lvl][lastCheck]).toFixed(0) + " sec";
var castingLast = "Tempo de lançamento : " + cast[lvl][lastCheck] + " sec";

if (lvl == 8 || lvl == 9 || lvl == 19 || lvl == 22) {
var allNextLevel = nextLevel + "<div class='passive'>Passiva</div>" + skilldescnext;
var allCurrentLevel = currentLevel + "<div class='passive'>Passiva</div>" + skilldesc + "<br>";
var allPreviousLevel = previousLevel + "<div class='passive'>Passiva</div>" + skilldescPrev + "<br>";
var allLastLevel = lastLevel + "<div class='passive'>Passiva</div>" + skilldescLast + "<br>";

} else if (cast[lvl][skillPoint[0]] == 0 ||!cast[lvl][skillPoint[0]] ) {
var allCurrentLevel = currentLevel + "<br>" + mpcurrent + "<br>" + cdcurrent + "<br>" + skilldesc + "<br>";
var allNextLevel = nextLevel + "<br>" + mpnext + "<br>" + cdnext + "<br>" + skilldescnext;
var allPreviousLevel = previousLevel + "<br>" + mpPrev + "<br>" + cdPrev + "<br>" + skilldescPrev;
var allLastLevel = lastLevel + "<br>" + mpLast + "<br>" + cdLast + "<br>" + skilldescLast;
} else {
var allCurrentLevel = currentLevel + "<br>" + mpcurrent + "<br>" + cdcurrent + "<br>" + castingcurrent + "<br>" + skilldesc + "<br>";
var allNextLevel = nextLevel + "<br>" + mpnext + "<br>" + cdnext + "<br>" + castingnext + "<br>" + skilldescnext;
var allPreviousLevel = previousLevel + "<br>" + mpPrev + "<br>" + cdPrev + "<br>" + castingPrev + "<br>" + skilldescPrev;
var allLastLevel = lastLevel + "<br>" + mpLast + "<br>" + cdLast + "<br>" + castingLast + "<br>" + skilldescLast;
}

Alguém consegue dar um help? Segue também duas screenshots mostrando, uma no final da página, e a outra ao lado direito da página.