Conditional text tooltips (devtools/snippets copy & paste ready)

conditional-text-tooltips.js

document.body.innerHTML = `
<style>
html, body {
    font-family: Arial, Verdana Helvetica, Sans-serif;
}

table {
    width: 80vw;
}

table, table td, table th {
    border: 1px solid gray;
}

table td, table th {
    padding: 1rem;
}

table th {
    text-align: left;
}

table.with-text-overflow-spans td {
    text-overflow:ellipsis;
    white-space: nowrap;
    overflow: hidden;
    max-width: 100px;
}

table.with-text-overflow-spans td > span {
    white-space: nowrap;
    overflow: hidden;
}
</style>

<h3>Default Behavior (with title attribute)</h3>

<table>
  <thead>
    <tr><th>Name</th><th>Other</th></tr>
  </thead>
  <tbody>
    <tr><td title="supercalifragilisticexpialidocious">supercalifragilisticexpialidocious</td>
        <td title="Year of the Ox">Year of the Ox</td></tr>
    <tr><td title="Short name">Short name</td>
        <td title="Hello World">Hello World</td></tr>
  </tbody>
</table>


<h3>With text wrapped in &quot;inline&quot; spans (with title attribute)</h3>

<table>
  <thead>
    <tr><th>Name</th><th>Other</th></tr>
  </thead>
  <tbody>
    <tr><td><span title="supercalifragilisticexpialidocious">supercalifragilisticexpialidocious</span></td>
        <td><span title="Year of the Ox">Year of the Ox</span></td></tr>
    <tr><td><span title="Short name">Short name</span></td>
        <td><span title="Hello World">Hello World</span></td></tr>
  </tbody>
</table>

<h3>With text wrapped in &quot;inline&quot; spans + &grave;text-overflow: ellipses&grave; (with title attribute)</h3>

<table class="with-text-overflow-spans">
  <thead>
    <tr><th>Name</th><th>Other</th></tr>
  </thead>
  <tbody>
    <tr><td><span>supercalifragilisticexpialidocious</span></td>
        <td><span>Year of the Ox</span></td></tr>
    <tr><td><span>Short name</span></td>
        <td><span>Hello World</span></td></tr>
  </tbody>
</table>

`;

var _debounce_map = new WeakMap();

/**
 * Returns a function that will call `fn` debounced to `timeout` duration.
 */
var debounce = (fn, timeout, ...args) => {
  return (...argsWhenRun) => {
    if (_debounce_map.has(fn)) {
      clearTimeout(_debounce_map.get(fn));
    }
    _debounce_map.set(fn, setTimeout(() => {
      fn(...args, ...argsWhenRun);
      _debounce_map.delete(fn);
    }, timeout));
  };
};


var init = () => {
    const table = document.querySelector('table.with-text-overflow-spans'),
        newLineRegex = /[\n\r\f]+/g,

        tooltipTogglerListener = () => {
            table.querySelectorAll('td > span').forEach(span => {
                if (!span.dataset.title) {
                    span.setAttribute('data-title', span.textContent.replace(newLineRegex, ''));
                }
                if (span.offsetWidth >= (span.parentElement.offsetWidth - 32)) { // 32 here is padding, left and right, of 1rem (or 16px)
                    span.title = span.dataset.title;
                }   else {
                    span.title = ''; // toggling native tooltip off
                }
            });
        },

        debouncedTooltipToggleListener = debounce(tooltipTogglerListener, 250);

    // Debounce listener as it may be triggered many times
    window.addEventListener('resize', debouncedTooltipToggleListener);
    window.addEventListener('deviceorientation', debouncedTooltipToggleListener);

    tooltipTogglerListener();
};


init();