我们可以在svg元素的mousehover上创建div，以使用简单的javascript，DOM和css具有多行工具提示？

问题描述

由于我是新的svg，我有一个新的问题，我试图创建一个简单的图，我需要有多线工具提示。
请建议如何将tooltip（JSON对象）添加到javascript，以将其显示为多行工具提示？
我们可以使用div，给属性div和使用它作为一个工具提示，如使它可见或不可见的鼠标悬停事件？

As I am new to svg, I have a new problem in it, I am trying to create a simple graph where I need to have multiline tooltip.Please suggest how to add tooltip (JSON object) to javascript, to display it as a multiline tooltip?And can we use div, give properties to div and use it as a tooltip, like making it visible or invisible on mouse hover event?

    window.onload = function(){
    var data = [  
    {   
        "srno" : 1 ,
        "start_time":0,
        "status" : "Breakdown" , 
        "duration" : 100,
        "color" : "#CC0000",
        "tooltip"   :   "Show up: 12:30
                    status:Break down
                    Duration:100"           
    },
    {
        "srno" : 2 ,
        "status" : "Mold-Change" , 
        "duration" :70 ,
        "color" : "#FF8000",
        "start_time":100 ,
        "tooltip"   :   "Show up: 2:30
                    status:Break down
                    Duration:100"   
    }
    ] ;
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
var svgNS = svg.namespaceURI;


for ( var i = 0 ; i < data.length ; i++){

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);

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

        var textWrapper = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject');
        var tips = document.createElement("P");
        tips.innerHTML = data[i].tooltip;

        document.getElementById("mySVG").appendChild(rect);
        document.getElementById("mySVG").appendChild(text); 

        rect.appendChild(textWrapper);
        }
   };

使用单行它工作，请建议多线？我只是想使用Json创建多行的方式或创建div，它将包含与tooltip相同的信息？

With single line It works, please suggest about multilines? I just wanted the way to create multiline using Json or to create div which will contain information same as tooltip?

推荐答案

你需要添加一个foreignObject而不是一个文本元素，然后把你的内容放在里面但它可以是任何HTML）。之后，一切都变成纯HTML。

You need to add a foreignObject instead of a text element and then put your content inside it (I wrapped it with a p, but it could be any HTML). After that, everything becomes plain HTML.

window.onload = function () {
    var data = [
        {
            "srno": 1,
            "start_time": 0,
            "status": "Breakdown",
            "duration": 100,
            "color": "#CC0000",
            "tooltip": "Show up: 12:30 <br />status:Break down <br />Duration:100"//JSON object to show as tooltip in multilines
        },
        {
            "srno": 2,
            "status": "Mold-Change",
            "duration": 70,
            "color": "#FF8000",
            "start_time": 100,
            "tooltip": "Show up: 2:30 <br />status:Mold-Change <br />Duration:70"//JSON object to show as tooltip in multilines
        }
    ];
    var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
    var svgNS = svg.namespaceURI;


    for (var i = 0 ; i < data.length ; i++) {

        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);

        var textWrapper = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject');
        textWrapper.setAttribute('x', data[i].start_time + 2);
        textWrapper.setAttribute('y', '25');
        textWrapper.setAttribute('fill', '#fff');
        textWrapper.setAttribute('width', data[i].duration);
        textWrapper.setAttribute('height', 50);

        var text = document.createElement("P");
        text.innerHTML = data[i].tooltip;
        textWrapper.appendChild(text);

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

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

        rect.appendChild(title);
    }
};

（第3段）及其原因在（第二段）

Other alternatives in http://www.w3.org/TR/SVG/text.html#Introduction (3rd paragraph) and reason for this in http://www.w3.org/TR/SVG/text.html#TextLayoutIntroduction (2nd paragraph)

编辑

如果是工具提示， ）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>SO</title>
    <style>
        p {
            display: block;
        }
    </style>
    <script>
        window.onload = function () {
            var data = [
                {
                    "srno": 1,
                    "start_time": 0,
                    "status": "Breakdown",
                    "duration": 100,
                    "color": "#CC0000",
                    "tooltip": "Show up: 12:30 \nstatus:Break down \nDuration:100"//JSON object to show as tooltip in multilines
                },
                {
                    "srno": 2,
                    "status": "Mold-Change",
                    "duration": 70,
                    "color": "#FF8000",
                    "start_time": 100,
                    "tooltip": "Show up: 2:30 \nstatus:Mold-Change \nDuration:70"//JSON object to show as tooltip in multilines
                }
            ];
            var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
            var svgNS = svg.namespaceURI;


            for (var i = 0 ; i < data.length ; i++) {

                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);

                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;

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

                rect.appendChild(title);
            }
        };
    </script>
</head>
<body>
    <svg id="mySVG">
    </svg>
</body>

这篇关于我们可以在svg元素的mousehover上创建div，以使用简单的javascript，DOM和css具有多行工具提示？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！