Making the popup from bootstrap stay within the screen

I am creating popups with popover bootstrap option in creating an interactive html. I first used the following tag:

<a class="btn popoverOption" 
   data-content="A group of people with a shared characteristic. It is an object of observation in epidemiological studies."
   data-original-title="cohort"
   data-placement="bottom"
   href="#"
   rel="popover"
   style="font-size: inherit; vertical-align: baseline; padding: 0; font: inherit;">
cohort
</a>

I have purposely made spces to show the syntax. The popup is below the text, so I tried adding data-container='body', but in this way when I zoom in the popup is frequently outside the screen. How can I make the popup always stay within my screen (without fixing the size in any way, if possible)?

Thanks in advance! Please tel me if I need to show more code, I didn't do it for brevity.