Всплывающее сообщение в CSS/HTML

Question

В основном у меня есть карта, и я хочу это сделать, когда я наводил на одно из состояний, чтобы получить всплывающее сообщение с указанием состояния. Это то, что я сделал до сих пор: (это только часть кода)

var states = map.selectAll('path.state') 
.data(states.features) 
    .enter().append('path') 
    .attr('class', 'state') 
    .attr('id', function(d) {console.log(d);return d.id;}) 
    .attr('d', path) 
    .attr("stroke","white") 
    .attr("stroke-width",2) 
    .attr('fill', 'lightgreen') 
    .on("mousemove",fnk) 
    .on("mouseout",fnk2) 

Когда функция «fnk()» вызывается (на mousemove) она в основном подчеркивает состояние в зеленый цвет, и он хранит имя из состояние в переменной «dsa».

function fnk() { 
asd = d3.select(this).style("fill","green"); 
dsa = asd.data()[0].properties.gn_name;} 

Теперь то, что я хочу сделать то, что эти данные в переменных dsa показан пользователю в каком-то всплывающее сообщении или некоторый прямоугольник элемента, который является активным, когда мышь находится на состоянии. Я попытался с «предупреждением», но затем пользователю нужно нажать кнопку «ОК», чтобы удалить сообщение, и я хочу, чтобы сообщение исчезло само по себе.

Answer 1

Я хотел бы создать ряд дивы, чтобы использовать в качестве всплывающих элементов, расположите их над каждым государством, и установить его CSS

visibility: hidden 

А потом внутри Fnk

<"your pop-up element">.style("visibility", "hidden") 

И конечно , не противное в fnk2

.style("visibility", "visible") 

Я не знаю много о DOM и обработки в JS, но это действительно архаичной anyw ау.

Вы должны действительно заглянуть в JQuery, вы можете заставить материал исчезать и исчезать красивее (вместо того, чтобы просто исчезать и появляться, как код, который я опубликовал). Не говоря уже, он требует меньше кода и более портативен в браузерах.