Implementare un tooltip

Adesso costruiamo un tooltip che ci dica di cliccare su una particolare cella della nostra tabella per evidenziare tutti i record dello stesso autore

Javascript code:

$(document).ready(function() {
  var column = 3;
  // Position the tooltip.
  var positionTooltip = function(event) {
    var tPosX = event.pageX - 5;
    var tPosY = event.pageY + 20;
    $('div.tooltip').css({top: tPosY, left: tPosX});
  };
  // Show (create) the tooltip.
  var showTooltip = function(event) {
    $('div.tooltip').remove();    
    var $thisAuthor = $(this).text();
   $('<div class="tooltip">Click to highlight all articles written by ' + $thisAuthor + '</div>').appendTo('body')
    positionTooltip(event);
  };
  // Hide (remove) the tooltip.
  var hideTooltip = function() {    
    $('div.tooltip').remove();
  };
  $('table.striped td:nth-child(' + column + ')' )
  .addClass('clickable')
  .click(function(event) {
	var thisClicked = $(this).text();
    $('table.striped td:nth-child(' + column + ')').each(function(index) {
      if (thisClicked == $(this).text()) {
        $(this).parent().toggleClass('highlight');
      } else {
        $(this).parent().removeClass('highlight');
      };   
    });
  })
  .hover(showTooltip, hideTooltip)
  .mousemove(positionTooltip);
})

Le parti importanti del codice:

• Definisco la funzione per posizionare il tooltip:

  var positionTooltip = function(event) {
      var tPosX = event.pageX - 5;
      var tPosY = event.pageY + 20;
      $('div.tooltip').css({top: tPosY, left: tPosX});
    };
  

• Definisco la funzione per aggiungerlo:

  var showTooltip = function(event) {
      $('div.tooltip').remove();    
      var $thisAuthor = $(this).text();
     $('<div class="tooltip">Click to highlight all articles written by ' + $thisAuthor + '</div>').appendTo('body')
      positionTooltip(event);
    };

• Definisco la funzione per rimuoverlo:

  var hideTooltip = function() {    
      $('div.tooltip').remove();
    };

• Assegmo i gestori d'evento a tutte le celle della mia terza colonna:

  .hover(showTooltip, hideTooltip)
    .mousemove(positionTooltip);

• Affinchè il tooltip venga posizionato correttamente, deve avere position:absolute; nel css:

  
  .tooltip {
    position: absolute;
    z-index: 2;
    background: #efd;
    border: 1px solid #ccc;
    padding: 3px;
  }
  

• Questo invece è un metodo che serve a chiamare una funzione definita all'esterno di un gestore d'evento, nel nostro caso all'interno del click sulle celle della terza colonna in modo che quando si preme il nostro tooltip venga immediatamente aggiornato senza dovre uscire e rientrare. In pratica stiamo dicendo di eseguire showTooltip come se fosse stata definita nello scope di this, cioè la nostra cella. Insieme passiamo event, che contiene le informazione sulla posizione del mio maouse

   showTooltip.call(this, event);

Ecco la nostra tabella tooltip step 1