Prevent CSS tooltip from going out of page/window

Question

I have a CSS only tooltip which loads a span as a tooltip when you hover the link. However this is positioned with CSS but if the link is near to the t

Answer 1

You can try this with only CSS and no JS at all. Not the most elegant type of tooltip but it will never fail you and it will never give you up :)

    .ktooltip {
        display: inline-block;
        text-indent:0em;
    }
    
    .ktooltiptext, .ktooltiptext {
    display: none;
        width: calc(100vw - 35px);
        background: #fff;
        border-radius: 6px;
        padding: 5px 5px;
        left: 10px;
        border: 2px solid grey;
        line-height: normal;
        text-decoration: none;
        position: absolute;
        z-index: 1;
    
    }
    
    p {display:inline-block}
    
    .ktooltip:hover + span {
        display: block;
    }

    

     My hope is in a bishop,
     
    

      
         
    According to tradition Nicholas was bishop of Myra in Lycia (south-west Turkey today).
    
    
      

      and in almighty God and his never-ending miracles.    

      Generous Saint Nicholas holds an office,

      there is a gold symbol in his sign.
        
          
             One of Nicholas’s symbols was three bags of gold which were the dowry he provided for three girls
            
       

       

https://jsfiddle.net/gtoprh21/72/