.tipsy { 
  padding: 5px; 
  font-size: 0.85em; 
  position: absolute; 
  z-index: 100000; 
  line-height: 1.3em; 
  max-width: 320px;
  max-width: min(320px, 90vw);
}
  .tipsy-inner { 
    padding: 6px 8px; 
    background-color: white; 
    border: 1px solid #333; 
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: normal;
    line-height: 1.4;
  }
  .tipsy-arrow { position: absolute; background: url('images/tipsy.gif') no-repeat top left; width: 9px; height: 5px; }
  .tipsy-n .tipsy-arrow { top: 0; left: 50%; margin-left: -4px; }
    .tipsy-nw .tipsy-arrow { top: 0; left: 10px; }
    .tipsy-ne .tipsy-arrow { top: 0; right: 10px; }
  .tipsy-s .tipsy-arrow { bottom: 0; left: 50%; margin-left: -4px; background-position: bottom left; }
    .tipsy-sw .tipsy-arrow { bottom: 0; left: 10px; background-position: bottom left; }
    .tipsy-se .tipsy-arrow { bottom: 0; right: 10px; background-position: bottom left; }
  .tipsy-e .tipsy-arrow { top: 50%; margin-top: -4px; right: 0; width: 5px; height: 9px; background-position: top right; }
  .tipsy-w .tipsy-arrow { top: 50%; margin-top: -4px; left: 0; width: 5px; height: 9px; }