Generovat a vykreslit html obsahu u kurzoru s funkcí JS

hlasů
0

Mám požadavek, aby zobrazoval tip nástroje na legendě D3 grafů. Četl jsem dokumentaci a nemohu zjistit, zda legenda podporuje špičku nástroje. Nicméně, byl jsem schopen najít myši nad událost.

Chci k tomu tabulku u kurzoru s funkcí Java Script.

Mám následující postup:

/**
 * 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;
}

tooltipMít správné údaje, které jsem v úmyslu k zobrazení, ale nejsem schopen přijít na to, jak k tomu, aby tato data v blízkosti kurzoru.

Položena 27/11/2018 v 17:57
zdroj uživatelem
V jiných jazycích...                            


1 odpovědí

hlasů
1

body.In vašeho umístění ukazatele akci můžete získat pozici myši s pageX a pageY. Pak víte, kde je myš na obrazovce. Na základě těchto informací můžete vytvořit div a umístit ho tam, kde je myš. Můžete použít HTML řetězec, který se vrátil z createLegendTooltip a aplikovat je na div se .innerHTML

Velmi generic níže uvedený příklad. Je tu víc, co musíte udělat. Například nastavit z-index, a také vytvoří funkci, která aktualizuje pozici coolDiv pokud jej chcete přesunout, když se myš pohybuje.

var coolDiv = document.createElement('div');
coolDiv.innerHTML = createLegendTooltip(data);
coolDiv.style.left = yourValueYouGetFrom_pageX;
coolDiv.style.top = yourValueYouGetFrom_pageY;
document.body.appendChild(coolDiv);
Odpovězeno 27/11/2018 v 18:21
zdroj uživatelem

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