none
Place tooltip on a fixed position even when window resizes RRS feed

  • Question

  • What is the best way to achieve so that the tooltip stays on a fixed position (as shown in the picture) even if the window resizes? Right now if the browser is zoomed 125% it's fine, but the moment it resizes, the positioning gets lost. Not sure if it's possible via CSS only or if we need to use Javascript. 

    Wednesday, September 18, 2019 2:24 AM

All replies

  • Hi Terriyaki,

    You could use some CSS style to make tooltip in a fixed postion, here is a demo for your reference:

    <style type="text/css">
    .tooltip {
      ;
      display: inline-block;
      border-bottom: 1px dotted black;
    }
    
    .tooltip .tooltiptext {
      
      width: 120px;
      background-color: #555;
      color: #fff;
      text-align: center;
      border-radius: 6px;
      padding: 5px 0;
      ;
      
      bottom: 125%;
      
      margin-
      opacity: 0;
      transition: opacity 0.3s;
    }
    
    .tooltip .tooltiptext::after {
      content: "";
      ;
      
      
      margin-
      border-width: 5px;
      border-style: solid;
      border-color: #555 transparent transparent transparent;
    }
    
    .tooltip:hover .tooltiptext {
      
      opacity: 1;
    }
    </style>
    <h2>Tooltip</h2>
    <p>Move the mouse over the text below:</p>
    
    <div class="tooltip">Hover over me
      <span class="tooltiptext">Tooltip text</span>
    </div>

    Resize the window to less:

    Zoom up to 150%:

    Reference:

    https://www.w3schools.com/css/css_tooltip.asp

    Thanks

    Best Regards


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.


    Wednesday, September 18, 2019 9:43 AM