I have a paragraph which has certain words that have a description (in glossary table), so in each word that exists in the glossary there should be a plus sign, when i click it, it should show the description in a box over the text. each word that has a description is wrapped in glossary_container(positioned relative) class, and each description has a class glossary_description positioned absolute).

everything is working fine until the word is at the end of the line, the description goes out of container and ruins the style.

I would like a way to solve this, maybe the box can go to left instead of right if the content is too big, or maybe there is a way to keep the element within the width of the paragraph.

here is my html.

some text

some text

some word

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

some text

here is my css

.glossary_description{
padding: 5px;
position: absolute;
background-color: white;
font-size: 0.8rem;
border: 1px solid #ccc;
padding: 10px;
width: auto;
z-index: 1;
}
.glossary_container{
    width:100%;
    position: relative;
}