Search code examples
javascriptsvgd3.jstooltip

How to break line in d3.js toolTip?

i create below functions for show tool tip on map. i want break line(new line) in tooltip on hover mouse. i crate a map using d3.js all working perfect i want to add more text in tooltip but it display in one line so want to break it add multiple line for tooltip.

Thank You,

function circleToolTipShow(event) {
    circleToolTipShow.style.display = 'block';
    toolTip.style.left = event.pageX + 10 + 'px';
    toolTip.style.top = event.pageY + 10 + 'px';
    toolTip.textContent = 'Group:' + event.target.getAttribute('M11_Competition1') +
                           ', Representative:' + event.target.getAttribute('M11_Rep') +
                           ', Gender:' + event.target.getAttribute('M11_Rep_Gender') +
                           ', Education:' + event.target.getAttribute('M11_Rep_Education') +
                           ', Term:' + event.target.getAttribute('M11_Rep_Term') +
                           ', Vote:' + event.target.getAttribute('M11_Rep_Vote') +
                           ', Age Year:' + event.target.getAttribute('M11_Rep_AgeYear') +
                           ', Birth In Province:' + event.target.getAttribute('M11_Rep_BirthInProvince') +
                           ', Bitth Province:' + event.target.getAttribute('M11_Rep_BirthProvince') +
                           ' ,Occupation In Province:' + event.target.getAttribute('M11_Rep_OccupationInProvince') +
                           ', Competition3:' + event.target.getAttribute('M11_Competition3') +
                           ', Competition4:' + event.target.getAttribute('M11_Competition4') +
                           ', Incunbency:' + event.target.getAttribute('M11_Rep_Incumbency')
                           ;    
}
function circleToolTipHide() {
    toolTip.style.display = 'none';
}

 var circ = d3.select('svg').append('circle')
            .attr('cx', cityBox.x + cityBox.width / spaceBetweenDots)
            .attr('cy', (cityBox.y + cityBox.height / spaceBetweenDots))
            .attr('fill', dotColor)
            .attr('r', 5)
            .attr('stroke', dotColor)
            .attr('stroke-width', 5)
            .attr('class', 'circleMark')
            .attr('M11_Competition1', party)
            .attr('M11_Rep', representative)  //Take value of rep from sheet
            .attr('M11_Rep_Gender', gender)  //Take value of rep from sheet
            .attr('M11_Rep_Education', education)//Take value of rep from sheet
            .attr('M11_Rep_Term', terms)  //Take value of rep from sheet
            .attr('M11_Rep_Vote', vote)  //Take value of rep from sheet
            .attr('M11_Rep_AgeYear', ageYear)
            .attr('M11_Rep_BirthInProvince', birthInProvince)
            .attr('M11_Rep_BirthProvince', birthProvince)
            .attr('M11_Rep_OccupationInProvince', occupationInProvince)
            .attr('M11_Competition3', competition3)
            .attr('M11_Competition4', competition4)
            .attr('M11_Rep_Incumbency', repIncumbency)    
    
    ;  
    circ["_groups"][0][0].addEventListener('mousemove', circleToolTipShow, true);
    circ["_groups"][0][0].addEventListener('mouseout', circleToolTipHide);

enter image description here

Solution

  • Since your string in toolTip.textContent is getting long and unwieldy, you can use a Template literals (Template strings), using ` backticks which allows multiline strings and easy string building.

    Afterwards, we can do some simple formatting. In this case, to append content as HTML, use innerHTML instead of textContent, I added <br> line breaks after each property, but you can put it the way you like.

    toolTip.innerHTML = `
Group: ${event.target.getAttribute('M11_Competition1')} <br>
Representative: ${event.target.getAttribute('M11_Rep')} <br>
Gender: ${event.target.getAttribute('M11_Rep_Gender')} <br>
Education: ${event.target.getAttribute('M11_Rep_Education')} <br>
Term: ${event.target.getAttribute('M11_Rep_Term')} <br>
Vote: ${event.target.getAttribute('M11_Rep_Vote')} <br>
Age Year: ${event.target.getAttribute('M11_Rep_AgeYear')} <br>
Birth In Province: ${event.target.getAttribute('M11_Rep_BirthInProvince')} <br>
Bitth Province: ${event.target.getAttribute('M11_Rep_BirthProvince')} <br>
Occupation In Province: ${event.target.getAttribute('M11_Rep_OccupationInProvince')} <br>
Competition3: ${event.target.getAttribute('M11_Competition3')} <br>
Competition4: ${event.target.getAttribute('M11_Competition4')} <br>
Incunbency: ${event.target.getAttribute('M11_Rep_Incumbency')}
`