In my latest game project, I have designed a battle scenario where three players with unique avatars face off against each other.
However, I am encountering an issue. When a character is targeted by a skill that lasts for multiple turns, an image representing that skill appears at the top left of their avatar (unlike the enemy team where the images are floated to the right as shown here: prntscr*com/6d354s).
The problem arises when hovering over these effect images, as they trigger a pop-up container displaying the effect description. While I have successfully implemented this feature, the positioning is incorrect - the effect description should appear next to the effect icon but is not aligning correctly on the right side.
On the left side, I managed to achieve the desired result using CSS hover properties as showcased here: prntscr*com/6d34a2 and http://prntscr.com/6d33zy
<div>
<a class="tooltip">
<img class="effect-icon">
<div class="effect-description">
<h1></h1>
<p></p>
</div>
</a>
</div>
In the code snippet above, I utilize position relative on the effects container while keeping the effect description hidden with display: none; and floating both elements to the left. By setting
.tooltip:hover div{display: inline-block; position:absolute;}Although this method works well for the left side, it poses challenges on the right side where the div containing the effect description gets pushed away from the effect icon...
Can someone provide assistance with this issue? :(
For reference, here is an example provided on CodePen: http://codepen.io/anon/pen/jEpgbX. I aim to have the effect description on the right side display to the left of the icon.