Generieren und machen HTML-Inhalt in der Nähe von Cursor mit JS-Funktion

stimmen
0

Ich habe eine Verpflichtung Werkzeugspitze auf der Legende von D3-Charts angezeigt werden soll. Ich lese die Dokumentation und ich kann nicht finden, wenn Legende Werkzeugspitze unterstützt. Allerdings konnte ich Mouseover-Ereignis finden.

Ich mag einen Tisch in der Nähe der Cursor mit einer Java-Script-Funktion machen.

Ich habe die folgende Methode:

/**
 * Creates legend
 * barData - data from given (i.e. mouse is currently hover it)
 */
function createLegendTooltip(data) {
    var tooltip =
        '<table><tr>' +
        '<td>' +
        '<div style=width:10px;height:10px;border:1px solid #000;background-color:' + data.color + '></div>' +
        '</td><td>' +
        data.instance +
        '</td></tr><tr><td> </td><td>' +
         data.saver + ', karan' + data.saveTime +
        '</td></tr></table>';
        return tooltip;
}

Das tooltiphat die richtigen Daten , die ich angezeigt Absicht , aber ich bin nicht in der Lage, herauszufinden , wie diese Daten nahe dem Cursor zu machen.

Veröffentlicht am 27/11/2018 um 17:57
quelle vom benutzer
In anderen Sprachen...                            


1 antworten

stimmen
1

body.In Ihre mouseover-Event können Sie die Mausposition mit pageX und pageY erhalten. Dann wissen Sie, wo die Maus auf dem Bildschirm ist. Mit diesen Informationen können Sie ein div erstellen und positionieren, wo die Maus ist. Sie können Ihre HTML-Zeichenfolge verwenden, die von createLegendTooltip und es auf die div mit .innerHTML zurückgegeben

Sehr allgemeines Beispiel unten. Theres mehr haben Sie zu tun. Zum Beispiel den Z-Index gesetzt und schafft auch eine Funktion, die die Position des coolDiv aktualisiert, wenn Sie es wollen, wenn die Maus bewegt sich zu bewegen.

var coolDiv = document.createElement('div');
coolDiv.innerHTML = createLegendTooltip(data);
coolDiv.style.left = yourValueYouGetFrom_pageX;
coolDiv.style.top = yourValueYouGetFrom_pageY;
document.body.appendChild(coolDiv);
Beantwortet am 27/11/2018 um 18:21
quelle vom benutzer

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more