Tooltips

[tristanlatr]

Here is some code and CSS to automatically add tooltips on all elements that have title defined.

The result looks like this:

Which can be overwhelming, currently, because all internal links have a title.

I think we should add a new attribute like "tooltiptitle" and fill it only in some circonstances, then we'll be able to use this code to show relevant extra informations.

// Tooltip code, ajusted from https://stackoverflow.com/a/26261233

// delta :    String or Number, the distance from the cursor at
//            which the tooltip should appear
function instantTooltips(textFrom, delta) {
    // if delta exists, and can be parsed to a number, we use it,
    // otherwise we use the default of 5:
    delta = parseFloat(delta) ? parseFloat(delta) : 5;
  
    // function to handle repositioning of the created tooltip:
    function reposition(e) {
      // get the tooltip element:
      var tooltip = this.firstChild;
      // setting the position according to the position of the
      // pointer:
      tooltip.style.top = (e.clientY + delta) + 'px';
      tooltip.style.left = (e.clientX + delta) + 'px';
    }
  
    // get all elements that have an attribute from which we
    // want to get the tooltip text from:
    var toTitle = document.querySelectorAll('[' + textFrom + ']'),
      //create a span element:
      span = document.createElement('span'),
      // find if we should use textContent or innerText (IE):
      textProp = 'textContent' in document ? 'textContent' : 'innerText',
      // caching variables for use in the upcoming forEach:
      parent, spanClone;
    // adding a class-name (for CSS styling):
    span.classList.add('createdTooltip');
    // iterating over each of the elements with a title attribute:
    [].forEach.call(toTitle, function(elem) {
      // reference to the element's parentNode:
      parent = elem.parentNode;
      // cloning the span, to avoid creating multiple elements:
      spanClone = span.cloneNode();
      // setting the text of the cloned span to the text
      // of the attribute from which the text should be taken:
      spanClone[textProp] = elem.getAttribute(textFrom);
  
      // inserting the created/cloned span into the
      // document, inside the element:
      elem.prepend(spanClone)
    //   parent.insertBefore(, firstChild);
  
      // binding the reposition function to the mousemove
      // event:
      elem.addEventListener('mousemove', reposition);
  
      // we're setting textFrom attribute to an empty string
      // so that the CSS will still apply, but which
      // shouldl still not be shown by the browser:
      elem.setAttribute(textFrom, '');
    });
  }
  
  // calling the function:
  instantTooltips('title', 20);

// /* Title tooltip */

// /*
// hiding, and styling, the elements we'll be creating
// */
// [title] span.createdTooltip {
//     display: none;
//     border: 1px solid #ccc;
//     background-color: rgba(255, 255, 255, 0.9);
//     padding: 0.2em 0.5em;
//     border-radius: 4px;
//     }
    
//     /*
//     showing the created elements on hovering the element we want to
//     show tooltips for
//     */
//     [title]:hover span.createdTooltip {
//     display: block;
//     position: fixed;
//     }