Svg: Display Alt Text In P Tag On Hover

I'm looking for a way to display the alt-text from an SVG circle when the mouse is over the element: the result I'm working with this javascrip code, but I can't get it to work: va

Solution 1:

You just need to add to the mouseover event listener you already have:

document.querySelector("#pagetitle").innerHTML = evt.target.getAttribute('alt')

I removed the code that placed a listener on the #pageTitle element. It wasn't neccesary, and was preventing this from working.

let allCircles = document.querySelectorAll("circle");
// Add an click handler to every circle that// adds the class "active" to the clicked circle.
allCircles.forEach(element => {
  element.addEventListener("click", clickHandler);
  element.addEventListener("mouseover", mouseoverHandler);
  element.addEventListener("mouseout", mouseoutHandler);
});

functionclickHandler(evt) {
  // Clear current selection (remove class "active" from any circle)
  allCircles.forEach((circle) => circle.classList.remove("active"));
  // Mark clicked circle selected
  evt.target.classList.add("active");
  // Clear any currently highlighted linesclearHighlightedLines();
}


functionmouseoverHandler(evt) {
  let activeCircle = document.querySelector("circle.active");
    document.querySelector("#pagetitle").innerHTML = evt.target.getAttribute('alt')

  let hoveredCircle = evt.target;
  if (activeCircle && (activeCircle != hoveredCircle)) {
    // Get the line that has classes matching both the actibve and hovered circlelet line = document.querySelector("line." + activeCircle.id + "." + hoveredCircle.id);
    // Add the class "highlight" to that lineif (line)
      line.classList.add("highlight");
  }
}

functionmouseoutHandler(evt) {
  clearHighlightedLines();
}

functionclearHighlightedLines() {
  // Find the line with class "highlight" (if any)var line = document.querySelector("line.highlight");
  // Remove the class "highlight"if (line)
    line.classList.remove("highlight");
}
 

:root {
  --color-1: #F2B705;
  --color-2: #C30F0E;
  --color-3: #264ABA;
  --color-4: #009CD2;
  --color-5: #E25727;
  --color-11: #C29204;
  --color-22: #990B0B;
  --color-33: #172E73;
  --color-44: #006B8E;
  --color-55: #BA4620;
}

#c1 {
  fill: var(--color-1);
}

#c2 {
  fill: var(--color-2);
}

#c3 {
  fill: var(--color-3);
}

#c4 {
  fill: var(--color-4);
}

#c5 {
  fill: var(--color-5);
}

.cls-7 {
  fill: none;
}

#c1.active {
  stroke: var(--color-11);
  stroke-width: 21.5;
}

#c2.active {
  stroke: var(--color-22);
  stroke-width: 21.5;
}

#c3.active {
  stroke: var(--color-33);
  stroke-width: 21.5;
}

#c4.active {
  stroke: var(--color-44);
  stroke-width: 21.5;
}

#c5.active {
  stroke: var(--color-55);
  stroke-width: 21.5;
}

#c1.circle:hover:not(.active) {
  stroke: var(--color-11);
  stroke-width: 21.5;
}

#c2.circle:hover:not(.active) {
  stroke: var(--color-22);
  stroke-width: 21.5;
}

#c3.circle:hover:not(.active) {
  stroke: var(--color-33);
  stroke-width: 21.5;
}

#c4.circle:hover:not(.active) {
  stroke: var(--color-44);
  stroke-width: 21.5;
}

#c5.circle:hover:not(.active) {
  stroke: var(--color-55);
  stroke-width: 21.5;
}

circle.btn1:hover:not(.active) {
  stroke: var(--color-11);
  stroke-width: 21.5;
}

circle.btn2:hover:not(.active) {
  stroke: var(--color-22);
  stroke-width: 21.5;
}

circle.btn3:hover:not(.active) {
  stroke: var(--color-33);
  stroke-width: 21.5;
}

circle.btn4:hover:not(.active) {
  stroke: var(--color-44);
  stroke-width: 21.5;
}

circle.btn5:hover:not(.active) {
  stroke: var(--color-55);
  stroke-width: 21.5;
}

line {
  stroke: #c1c1c1;
  stroke-width: 22;
}

line.highlight {
  stroke: black;
}


/*
circle.active {
    stroke: red;
    stroke-width: 11.5;
}
*/

<pid="pagetitle">Placeholder</p><svgxmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"viewBox="-10 -10 940 910"><defs><style></style></defs><polygonid="fem-kant"class="cls-7"points="456.29 7.49 898.87 329.05 729.82 849.33 182.76 849.33 13.71 329.05 456.29 7.49"/><lineclass="c3 c5"x1="656.32"y1="748.57"x2="133.5"y2="368.62"/><lineclass="c2 c4"x1="258.55"y1="747.22"x2="779.33"y2="368.43"/><lineclass="c1 c4"x1="258.55"y1="747.22"x2="457.43"y2="133.5"/><lineclass="c1 c3"x1="457.43"y1="133.5"x2="657.03"y2="748.57"/><lineclass="c5 c2"x1="133.5"y1="368.62"x2="779.33"y2="368.43"/><lineclass="c1 c2"x1="779.33"y1="368.43"x2="457.43"y2="133.5"/><lineclass="c2 c3"x1="779.33"y1="368.43"x2="657.03"y2="748.57"/><lineclass="c3 c4"x1="258.55"y1="747.22"x2="657.03"y2="748.57"/><lineclass="c4 c5"x1="258.55"y1="747.22"x2="133.5"y2="368.62"/><lineclass="c5 c1"x1="133.5"y1="368.62"x2="457.43"y2="133.5"/><ahref="#0"><circleid="c1"class="btn1 btn"alt="one"cx="455.9"cy="133.5"r="133"data-Name="shape 1"data-tabindex="0" /></a><ahref="#0"><circleid="c2"class="btn2 btn"alt="two"cx="779.33"cy="368.43"r="133"data-Name="shape 2"data-tabindex="0" /></a><ahref="#0"><circleid="c3"class="btn3 btn"alt="three"cx="656.32"cy="748.57"r="133"data-Name="shape 3"data-tabindex="0" /></a><ahref="#0"><circleid="c4"class="btn4 btn"alt="four"cx="256.18"cy="748.57"r="133"data-Name="shape 4"data-tabindex="0" /></a><ahref="#0"><circleid="c5"class="btn5 btn"alt="Application"cx="133.5"cy="368.62"r="133"data-Name="shape 5"data-tabindex="0" /></a><script></script></svg>