Problema com limite da página
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.
/applications/core/interface/imageproxy/imageproxy.php?img=https://i.imgur.com/XoLG7jj.png&key=4471ebef53af5d00b137250a0f0dbfa647b0b65f97e3be898bfda7481d81f769" width="318" data-imageproxy-source="https://i.imgur.com/XoLG7jj.png" /> /applications/core/interface/imageproxy/imageproxy.php?img=https://i.imgur.com/LGonlC5.png&key=e3fb5c1fbda80320dba033921337ed89a651140f2c16198606eaa6fe8dd7d19d" width="281" data-imageproxy-source="https://i.imgur.com/LGonlC5.png" />Discussão (1)
Carregando comentários...