Gecko Tooltip 2025

by Petr Haluza

HTML

<p><span class="GTooltip"><span>Tady je obsah tooltipu</span>Tady</span> je nějakej tooltip a potom je jeden <span class="GTooltip"><span>Opět jeden tooltip ovšem s poměrně dlouhýýýýým obsahem a html <b>formátováním</b></span>tu</span> a pak taky na kocni rakdu nekde <span class="GTooltip"><span>Posledni tooltip</span>na konec</span></p>
<code>Zkus zmenšovat okno, aby poslední tooltip byl u pravé hrany displeje, skript vyhodnocuje kde se má tooltip zobrazit a poziciuje jej tak, aby byl vždy viditelný.</coe>

CSS

.GTooltip { position: relative; display: inline-block; text-decoration: underline dashed orange 1.5px; text-underline-offset: 2px; cursor: help}
.GTooltip > span { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); opacity: 0; min-width: 150px; max-width: 400px; padding: 8px 12px; margin-top: 8px; background: #def; pointer-events: none; transition: opacity 0.2s, left 0.2s, transform 0.2s; z-index: 10}
.GTooltip > span:before { content: ""; position: absolute; bottom: 100%; left: var(--arrow-left, 50%); transform: translateX(0); border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid #def}
.GTooltip:hover > span { opacity: 1}

JavaScript

$(document).ready(function () { // Gecko Responzivni tooltip by HAP
    $('.GTooltip').on('mouseenter', function () {
      var $container = $(this);
      var $tooltip   = $container.children('span');
      $tooltip.css({opacity: 1, left: '50%', transform: 'translateX(-50%)'});
      setTimeout(function () {
        var containerOffset = $container.offset();
        var tooltipPos = $tooltip.position();
        var tooltipWidth = $tooltip.outerWidth();
        var winWidth = $(window).width();
        var tooltipScreenLeft = containerOffset.left + tooltipPos.left;
        var tooltipScreenRight = tooltipScreenLeft + tooltipWidth;
        var newLeft = tooltipPos.left;
        if (tooltipScreenLeft < 0) {
          newLeft = tooltipPos.left - tooltipScreenLeft;
        } 
        else if (tooltipScreenRight > winWidth) {
          var overflow = tooltipScreenRight - winWidth;
          newLeft = tooltipPos.left - overflow;
        }
        $tooltip.css({ left: newLeft, transform: 'none'});
        var containerCenter = $container.outerWidth() / 2;
        var arrowHalf = 5;
        var arrowPos = containerCenter - newLeft - arrowHalf;
        $tooltip.css('--arrow-left', arrowPos + 'px');
      }, 10);
    })
    .on('mouseleave', function () {
      $(this).children('span').css({opacity: 0,left: '50%',transform: 'translateX(-50%)'});
    });
    $(window).on('resize', function() {
      $('.GTooltip > span').css({left: '50%', transform: 'translateX(-50%)'});
    });
  });