Question

I have used this: That does not work. I have added both of urs suggestion.. but it did not work!

svg
{
 width:720px;
 height:50px;
 border:#999999 solid 2px;
}
.tooltip{
display: inline;
position: relative;
}
.tooltip:hover:after{
background: #8B8386;
border-radius: 5px;
top:21px;
color: #fff;
content: attr(title);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 220px;
font-family:calibri;
font-weight:700
}
</style>
<body>
<table>
<tr>
    <td><div id="first" style="padding:2px">Machine:</div></td>

    <td><div id="second"><svg id="mySVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" ></svg></div></td>
</tr>
</table>
<script>
    window.onload = function(){
    var data = [  
    {   
        "srno" : 1 ,
        "status" : "Breakdown" , 
        "duration" : 100,
        "color" : "#CC0000",
        "start_time": 0,
        "tooltip": "Show up: 12:30 \nstatus:Break down \nDuration:100"  
    },
    {
        "srno" : 2 ,
        "status" : "Mold-Change" , 
        "duration" :70 ,
        "color" : "#FF8000",
        "start_time": 100,
        "tooltip": "Show up: 12:30 \nstatus:Break down \nDuration:100" 
    }
    ] ;
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
var svgNS = svg.namespaceURI;

for ( var i = 0 ; i < data.length ; i++){
<!--Drawing Rectangle-->
var rect = document.createElementNS(svgNS,'rect');

var width = data [i].duration ;

rect.setAttribute('x', data[i].start_time);
rect.setAttribute('y',0);
rect.setAttribute('width',data[i].duration);
rect.setAttribute('height',50);
rect.setAttribute('fill',data[i].color);

document.getElementById("mySVG").appendChild(rect);
<!--End of Rectangle-->

<!--Drawing Status on rect-->
var status = document.createElementNS('http://www.w3.org/2000/svg', 'text');
status.setAttribute('x',data[i].start_time+2);
status.setAttribute('y', '25');
status.setAttribute('fill', '#fff');
status.textContent = data[i].status;

document.getElementById("mySVG").appendChild(status);
<!--Drawing Status on rect-->

<!--Drawing Tooltip on rect-->
var textWrapper = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject');
textWrapper.setAttribute('x', data[i].start_time);
textWrapper.setAttribute('y', '0');
textWrapper.setAttribute('width', data[i].duration);
textWrapper.setAttribute('height', 50);

var text = document.createElement("P");
text.setAttribute('title', data[i].tooltip);
text.style.height = "50px";
textWrapper.appendChild(text);

var title = document.createElementNS('http://www.w3.org/2000/svg', 'title');
title.textContent = data[i].title;
title.classList.add('.tooltip');
 rect.appendChild(title);

document.getElementById("mySVG").appendChild(textWrapper);

<!--Drawing Tooltip on rect-->

}
};
</script>

Please suggest to give style to title.I have used this: That does not work. I have added both of urs suggestion.. but it did not work!

Answer 1

1。）此元素尚未插入DOM中，因此您无法使用document.getElementByTagName（＆＃39; title＆＃39;）
2.）document.getElementByTagName（＆＃39; title＆＃39;）[0]返回文档的标题标签，用于指定文档/页面的标题。

你应该做的是：

JNDI NAME : jdbc/POI_DS
URL : jdbc:oracle:thin:@localhost:1521:XE

为刚刚创建的元素的引用分配属性，即 title ，而不是document.getElementsByTagName（＆＃39; title＆＃39;）[0]。

Answer 2

您可以按如下方式添加：

title.classList.add("tooltip");

以下是 DEMO

<强>更新

选中 Updated Demo

我清除了一些控制台错误。

只需将javascript部分复制并粘贴到您的页面中，即可立即添加该类。一个主要的变化是您要将标题添加到标题以及. title.classList.add('.tooltip');，但它应该没有.，如title.classList.add('tooltip');检查演示并让我知道!!

how to assign a css class to title of svg element using javascript?

2 个答案: