So zeigen Sie den Tooltip nach der Mausbewegung erneut an

Ich verwende eine Zeichenfläche, um mehrere UI-Komponenten darzustellen. Ich setze canvas.title, um die Hilfe für jede Komponente darzustellen.So zeigen Sie den Tooltip nach der Mausbewegung erneut an

... 
if(mouse.y >= y && mouse.y <= y + w && mouse.over){ 
    if(currentId !== tool.id){ 
     canvas.title = tool.help; 
    } 
    currentId = tool.id; 
...

Das Problem ist, dass, wenn die Maus der Werkzeugspitze bewegt sich versteckt ist und nicht Display wieder, bis ich die Maus aus bewegen und dann zurück auf die Leinwand bewegen.

Ich möchte das Verhalten so ändern, dass der Tooltip erneut angezeigt wird, wenn ich den Mauszeiger über eine andere UI-Komponente bewege, ohne das Canvas-Element zu verlassen?

Quelle

2016-05-22 Blindman67

Hmmm ... nur native Tooltip - keine benutzerdefinierte Tooltip mit Div-Show-on-Maus-Event erlaubt? Mal sehen: 1. Sie haben bereits versucht, den Titel zu ändern. 2. Es scheint keine "HTML-Tooltip-Anzeigeeinstellungen" zu geben. 3. Manuelles Auslösen von mouseover/mouseenter funktioniert nicht, 4. Verstecken & erneutes Anzeigen der Leinwand funktioniert nicht. 5. Vorübergehende Neupositionierung der Leinwand mit der Position: Absolut funktioniert nicht. Ich gebe auf ... Was ist die Antwort? – markE

@markE Die Antwort? Ich wünschte, ich wüsste, dass es nicht "Nein ... nicht möglich!" Nur eines, das ich nicht ausprobiert habe, ist das Ereignis ausgelöst. Muss das versuchen, bevor ich irgendeine Antwort akzeptiere. – Blindman67

Ich dachte wirklich, du würdest die Antwort selbst posten. :-) Ich habe versucht, die wahrscheinlichen Ereignisse auszulösen ... kein Glück. Eventuell Ereignisse in Kombination mit Änderungen der CSS-Sichtbarkeit, Position usw. - aber ich bin nicht hoffnungsvoll? Nur neugierig ... warum nicht den typischen (und anpassbareren) div-show-on-mouse-event-Tooltipp verwenden? – markE

Ihre individuelle Tooltip Implementierung mehr Freiheit und Kontrolle. Dies ist ein einfaches Beispiel http://jsfiddle.net/mynetx/5qbP3/ Sie können Ideen und bauen von hier aus. Ein weiterer Vorteil ist die Kontrolle über das CSS, in dem Sie in Fällen wie Ihnen helfen möchten.

window.addEventListener("load", function() { 
var couponcodes = document.getElementsByClassName("couponcode"); 
for (var i = 0; i < couponcodes.length; i++) { 
    couponcodes[i].addEventListener("mouseover", function() { 
     var coupontooltip = this.getElementsByClassName("coupontooltip")[0]; 
     coupontooltip.removeAttribute("style"); 
    }); 
    couponcodes[i].addEventListener("mouseout", function() { 
     var coupontooltip = this.getElementsByClassName("coupontooltip")[0]; 
     coupontooltip.style.display = "none"; 
    }); 
} });

Quelle

2016-05-22 16:05:05 Netham

Tooltips sind Teil des Systems, in dem der Browser ausgeführt wird, und sind in keiner Weise von JavaScript aus zugänglich.

Ich würde empfehlen, Ihren eigenen Tooltip zu implementieren, der nicht sehr schwierig ist (sowohl auf Leinwand als auch mit einem zusätzlichen Element).

Wenn Sie sich Sorgen um sind accessibility es ist möglich, ein Element „Tooltip“ Rolle zu geben: http://accessibility.athena-ict.com/aria/examples/tooltip.shtml

Quelle

2016-05-22 15:33:16 Grassator

Sie können fabric.js verwenden. siehe this.

Quelle

2016-05-22 16:09:19

So zeigen Sie den Tooltip nach der Mausbewegung erneut an

Antwort

Verwandte Themen