javascript - 向动态创建的 SVG 元素添加工具提示

Question

当前正在尝试使用此工具提示:http://cbracco.me/a-simple-css-tooltip/

我正在创建一个 SVG map ，其中包含动态创建的 SVG 圆圈，描绘了不同县的大学。问题是，我无法显示工具提示。这是我的一些代码:

/**
 * Tooltip Styles
 */

/* Add this attribute to the element that needs a tooltip */
[data-tooltip] {
  position: relative;
  z-index: 2;
  cursor: pointer;
}

/* Hide the tooltip content by default */
[data-tooltip]:before,
[data-tooltip]:after {
  visibility: hidden;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  pointer-events: none;
}

/* Position tooltip above the element */
[data-tooltip]:before {
  position: absolute;
  bottom: 150%;
  left: 50%;
  margin-bottom: 5px;
  margin-left: -80px;
  padding: 7px;
  width: 160px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  background-color: #000;
  background-color: hsla(0, 0%, 20%, 0.9);
  color: #fff;
  content: attr(data-tooltip);
  text-align: center;
  font-size: 14px;
  line-height: 1.2;
}

/* Triangle hack to make tooltip look like a speech bubble */
[data-tooltip]:after {
  position: absolute;
  bottom: 150%;
  left: 50%;
  margin-left: -5px;
  width: 0;
  border-top: 5px solid #000;
  border-top: 5px solid hsla(0, 0%, 20%, 0.9);
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  content: " ";
  font-size: 0;
  line-height: 0;
}

/* Show tooltip content on hover */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
  visibility: visible;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}
</style>

//json
var data = {"counties":[{"id":"Tippecanoe", "title":"Purdue University", "r":"5"} ]};

<svg>
    <g id="counties">    
        <path id="Tippecanoe" d="M146.7,210.6 L171.4,211.3 L190.2,211.4 L200.5,211.5 L200.3,234.4 L200.3,234.4 L200.3,234.4 L200.3,234.4 L200.0,251.9 L199.7,272.8 L169.1,272.3 L146.1,272.0 L146.4,251.5 L146.6,245.2 L146.8,226.0 L146.7,226.0 L146.7,213.2 Z"></path>
    </g>
</svg>

//for each id, match up the json to the svg
function getTitleById (id){
  for(var i = 0; i < data.counties.length; i++){
    if (data.counties[i].id == id){
      return data.counties[i].title;
    }
  }
};

//same as above, but grab the radius
function getRById (id){
  for(var i = 0; i < data.counties.length; i++){
    if (data.counties[i].id == id){
      return data.counties[i].r;
    }
  }
};

//find center of each svg
var mainSVG = document.getElementById("counties");
$(document).ready(function() {
  $(".school").each(function() {
        var bbox = this.getBBox();
        var currentId = $(this).attr('id');
    var xc = Math.floor(bbox.x + bbox.width/2.0);
    var yc = Math.floor(bbox.y + bbox.height/2.0);    

//create circle
var circleNode = document.createElementNS("http://www.w3.org/2000/svg", "circle");
    circleNode.setAttribute("cx", xc);
    circleNode.setAttribute("cy", yc);
    circleNode.setAttribute("class", "circle");
    circleNode.setAttribute("stroke-width", "4");
    circleNode.setAttribute("stroke", "black");
    circleNode.setAttribute("fill", "black");
    circleNode.setAttribute("title", getTitleById(currentId));
    circleNode.setAttribute("r", getRById(currentId));
    circleNode.setAttribute("data-tooltip", getTitleById(currentId));  //suspicious line
    mainSVG.appendChild(circleNode);
});

});

圆圈正确显示，只是工具提示不正确。我认为这可能与我引用 circleNode.setAttribute("data-tooltip", getTitleById(currentId)); 的方式有关，但是当我检查网页本身时，它正确显示为data-tooltip="普渡大学"。但没有工具提示。

Answer 1

我认为您不能在 SVG 元素上使用 data-* 属性。

查看这个 StackOverflow 问题和答案:

Do SVG docs support custom data- attributes?