Gerar e processar o conteúdo html perto cursor com a função JS

votos
0

Eu tenho um requisito para exibir dica de ferramenta na lenda de gráficos D3. Eu li a documentação e não consigo encontrar se lenda suporta ponta da ferramenta. No entanto, eu era capaz de encontrar evento de mouse-over.

Quero prestar uma mesa perto do cursor com uma função java script.

Eu tenho o seguinte método:

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

A tooltiptêm os dados corretos que pretendo mostrar, mas eu não sou capaz de descobrir como tornar esses dados perto do cursor.

Publicado 27/11/2018 em 17:57
fonte usuário
Em outras línguas...                            


1 respostas

votos
1

body.In seu evento mouseover você pode obter a posição do mouse com pageX e pageY. Então você sabe onde está o mouse na tela. Com essas informações você pode criar uma div e posicioná-lo onde está o mouse. Você pode usar a seqüência de html que é retornado do createLegendTooltip e aplicá-lo para o div com .innerHTML

exemplo muito genérico abaixo. Theres mais você tem que fazer. Por exemplo definir o z-index e também cria uma função que atualiza a posição do coolDiv se você quer que ele se mova quando o mouse se move.

var coolDiv = document.createElement('div');
coolDiv.innerHTML = createLegendTooltip(data);
coolDiv.style.left = yourValueYouGetFrom_pageX;
coolDiv.style.top = yourValueYouGetFrom_pageY;
document.body.appendChild(coolDiv);
Respondeu 27/11/2018 em 18:21
fonte usuário

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