Mudanças entre as edições de "Widget:Item"

De Wiki Gla
Ir para navegação Ir para pesquisar
m
m
Linha 27: Linha 27:
             text-align: center;
             text-align: center;
             overflow: visible;
             overflow: visible;
        }
        .item-wrapper:hover {
            z-index: 99999;
         }
         }


Linha 65: Linha 61:
         .item-tooltip {
         .item-tooltip {
             display: none;
             display: none;
            position: absolute;
            bottom: calc(100% + 12px);
            left: 50%;
            transform: translateX(-50%);
             width: 230px;
             width: 230px;
            z-index: 99999;
             pointer-events: none;
             pointer-events: none;
             flex-direction: column;
             flex-direction: column;
Linha 77: Linha 68:
         }
         }


         .item-wrapper:hover .item-tooltip {
         .item-tooltip.tooltip-visible {
             display: flex;
             display: flex;
            position: fixed;
            z-index: 999999;
         }
         }


Linha 150: Linha 143:
         }
         }


        /* Seta padrão: aponta para baixo (tooltip acima do item) */
         .item-tooltip-arrow {
         .item-tooltip-arrow {
             display: block;
             display: block;
Linha 157: Linha 151:
             border-right: 8px solid transparent;
             border-right: 8px solid transparent;
             border-top: 8px solid #1e1e30;
             border-top: 8px solid #1e1e30;
            border-bottom: none;
             flex-shrink: 0;
             flex-shrink: 0;
         }
         }


         /* Deslocamento inteligente: tooltip empurrado para a direita */
         /* Tooltip abaixo do item: inverte a ordem e a seta */
        .item-tooltip.tooltip-below {
            flex-direction: column-reverse;
        }
 
        .item-tooltip.tooltip-below .item-tooltip-arrow {
            border-top: none;
            border-bottom: 8px solid #2a2a3d;
        }
 
        /* Deslocamento horizontal */
         .item-tooltip.tooltip-shift-right {
         .item-tooltip.tooltip-shift-right {
            left: 0;
            transform: none;
             align-items: flex-start;
             align-items: flex-start;
         }
         }
Linha 171: Linha 174:
         }
         }


        /* Deslocamento inteligente: tooltip empurrado para a esquerda */
         .item-tooltip.tooltip-shift-left {
         .item-tooltip.tooltip-shift-left {
            left: auto;
            right: 0;
            transform: none;
             align-items: flex-end;
             align-items: flex-end;
         }
         }
Linha 187: Linha 186:
         (function () {
         (function () {
             var TIP_WIDTH = 230;
             var TIP_WIDTH = 230;
             var EDGE_MARGIN = 10;
             var MARGIN = 8;
            var GAP = 6;
            var activeTip = null;
            var activeWrapper = null;
 
            function showTooltip(wrapper) {
                hideTooltip();


            function positionTooltip(wrapper) {
                 var tip = wrapper.querySelector('.item-tooltip');
                 var tip = wrapper.querySelector('.item-tooltip');
                 if (!tip) return;
                 if (!tip) return;


                 tip.classList.remove('tooltip-shift-right', 'tooltip-shift-left');
                activeWrapper = wrapper;
                activeTip = tip;
 
                document.body.appendChild(tip);
                tip.classList.add('tooltip-visible');
                 tip.classList.remove('tooltip-below', 'tooltip-shift-right', 'tooltip-shift-left');
                 tip.style.removeProperty('--arrow-offset');
                 tip.style.removeProperty('--arrow-offset');


                 var rect = wrapper.getBoundingClientRect();
                 var rect = wrapper.getBoundingClientRect();
                var tipH = tip.offsetHeight;
                var tipW = tip.offsetWidth || TIP_WIDTH;
                 var centerX = rect.left + rect.width / 2;
                 var centerX = rect.left + rect.width / 2;
                var halfTip = TIP_WIDTH / 2;
                var arrowCenter = Math.max(12, Math.min(TIP_WIDTH - 12, rect.width / 2));


                 if (centerX - halfTip < EDGE_MARGIN) {
                 var above = rect.top - tipH - GAP;
                var below = rect.bottom + GAP;
                var top;
 
                if (above >= MARGIN) {
                    top = above;
                } else if (below + tipH <= window.innerHeight - MARGIN) {
                    top = below;
                    tip.classList.add('tooltip-below');
                } else {
                    top = Math.max(MARGIN, Math.min(above, window.innerHeight - MARGIN - tipH));
                }
 
                var left = centerX - tipW / 2;
 
                if (left < MARGIN) {
                    left = Math.max(MARGIN, rect.left);
                     tip.classList.add('tooltip-shift-right');
                     tip.classList.add('tooltip-shift-right');
                     tip.style.setProperty('--arrow-offset', arrowCenter + 'px');
                     tip.style.setProperty('--arrow-offset', Math.max(12, centerX - left) + 'px');
                 } else if (centerX + halfTip > window.innerWidth - EDGE_MARGIN) {
                 } else if (left + tipW > window.innerWidth - MARGIN) {
                    left = Math.min(window.innerWidth - MARGIN - tipW, rect.right - tipW);
                     tip.classList.add('tooltip-shift-left');
                     tip.classList.add('tooltip-shift-left');
                     tip.style.setProperty('--arrow-offset', arrowCenter + 'px');
                     tip.style.setProperty('--arrow-offset', Math.max(12, (left + tipW) - centerX) + 'px');
                }
 
                tip.style.top = top + 'px';
                tip.style.left = left + 'px';
            }
 
            function hideTooltip() {
                if (activeTip && activeWrapper) {
                    activeTip.classList.remove('tooltip-visible', 'tooltip-below', 'tooltip-shift-right', 'tooltip-shift-left');
                    activeTip.style.top = '';
                    activeTip.style.left = '';
                    activeTip.style.removeProperty('--arrow-offset');
                    activeWrapper.appendChild(activeTip);
                    activeTip = null;
                    activeWrapper = null;
                 }
                 }
             }
             }


             document.addEventListener('mouseover', function (e) {
             document.addEventListener('mouseover', function (e) {
                 var wrapper = e.target.closest
                 var el = e.target;
                     ? e.target.closest('.item-wrapper')
                var wrapper = el.closest ? el.closest('.item-wrapper') : null;
                    : null;
                if (wrapper && wrapper !== activeWrapper) {
                 if (wrapper) positionTooltip(wrapper);
                     showTooltip(wrapper);
                }
            });
 
            document.addEventListener('mouseout', function (e) {
                if (!activeWrapper) return;
                var wrapper = e.target.closest ? e.target.closest('.item-wrapper') : null;
                 if (wrapper === activeWrapper && !activeWrapper.contains(e.relatedTarget)) {
                    hideTooltip();
                }
             });
             });
         })();
         })();
     </script>
     </script>
</includeonly>
</includeonly>

Edição das 22h46min de 16 de março de 2026

Disponível em “https://wiki.gla.com.br/index.php?title=Widget:Item&oldid=44955”