Empêcher une div "absolute" de sortir de la page

Bonjour,

Je rencontre actuellement un problème, j'aimerais y trouver une solution en CSS si possible.

Voici la situation :



Je dispose d'un calendrier dans lequel les cases sont survolables (elles seront cliquables à terme, c'est plus simple pour tester). Au survol, une bulle positionnée en absolute (par rapport à la case survolée) apparaît en bas à droite de la case.

Seulement, lorsque j'arrive à la dernière colonne de mon calendrier, la bulle sort de la zone visible de la page :



Voyez-vous une solution pour limiter le positionnement absolu à une certaine zone dans la page par exemple pour éviter ce genre de problème ?

RETROUVEZ LE CODEPEN ICI

Il y a quelques bugs de CSS mais l'important pour mon problème est ici, il faut se mettre en écran réduit et passer sa souris sur la case d'en haut à droite.

Si vous avez une idée pour résoudre ce problème, n'hésitez pas à m'en faire part.

Merci d'avance !
Modifié par Myrial (10 Dec 2019 - 15:34)

Et l'eau,


1. ce n'est pas des <ul> mais un <table>
2. pour faire simple, chaque cellule doit avoir son action bulle que tu afficheras au survol
3. chaque cellule doit être en position relative
4. chaque action bulle sera en position absolute
5. le vh ou vw -> ouais bof bof..... très hasardeux comme unité (surtout suivant le contexte). utilise plutôt le rem/px/em.

ps : dans code pen, ce n'est pas la peine d'envoyer tout l'ossature d'un document html
Modifié par niuxe (10 Dec 2019 - 18:48)

Bonjour,

c'est plus sûr en JS (et pas simple pour gérer tous les cas… y compris redimensionnement après chargement de la page ou pendant que c'est affiché !).
Mais avec quelques contraintes, il y a tout de même de quoi faire en CSS. Est-ce que ton infobulle a une largeur maximale connue ? Par rapport à la largeur d'une cellule/colonne surtout.
Si oui, tu peux aligner par rapport au bord gauche quand l'infobulle est celle d'une des 5 1ères colonnes par exemple mais par rapport au bord droit quand la référence est l'une des 2 dernières colonnes, si l'infobulle fait 1,8 colonnes de large par exemple.
:nth-last-child(2) permet de cibler la dernière et l'avant-dernière… à moins que tu n'aies une classe genre td.week-end (en France. Les anglo-saxons font démarrer leur semaine le dimanche donc ma classe est pas très "internationalisation" )