7b0c89608f69abda761354d7148a3a79ba2ca604
chmalee
  Fri Aug 29 09:19:32 2025 -0700
Add line break settings to the tooltip CSS to allow web browsers to break at any character but in practice usually puncuation. This does not affect if we manually stick line breaks in, only wrapping long text lines, refs #36287

diff --git src/hg/htdocs/style/HGStyle.css src/hg/htdocs/style/HGStyle.css
index e6ea9b001a6..0c7eb9ea3a5 100644
--- src/hg/htdocs/style/HGStyle.css
+++ src/hg/htdocs/style/HGStyle.css
@@ -1172,30 +1172,35 @@
  * exact positioning is set by associated javascript in utils.js */
 .tooltip {
     visibility: hidden;
     background-color: rgb(238,238,238);
     color: black;
     text-align: left;
     position: fixed;
     z-index: 1003; /* these indices are all over the place for various things */
     opacity: 0;
     line-height: 1em;
     padding: 3px;
     border: 1px solid black;
     border-radius: 2px;
     box-shadow: 0px 1px 2px darkgrey;
     max-width: 400px;
+/* Allow breaking long lines, hopefully web browsers will mostly pick
+ * punctuation, primarily added to support the gnomad tooltips where the 'variation'
+ * filter is a long comma sep list with no spaces after the commas */
+    white-space: normal;
+    overflow-wrap: anywhere;
 }
 
 .tooltip:hover .tooltiptext {
     visibility: visible;
     opacity: 0.9;
 }
 
 .chainBreak {
     display: grid;
     grid-template-columns: max-content max-content;
     row-gap: 10px;
 }  
 
 .dialogNewWindowIcon {
     position: absolute;