将工具提示应用于 Raphael 中的一组而不是每一侧

Question

这里是 JS Fiddle，它显示了悬停立方体时的工具提示。每当我将鼠标悬停在我希望悬停在整个立方体上只出现一次的每个面上时，都会调用工具提示。如果我可以使用我在 fiddle 中使用的相同插件，我更喜欢，以防万一，如果不可能，也欢迎使用其他解决方案。

JS

(function () {
    var paper = Raphael("paper", "100%", "100%");
    var cube2 = paper.set();
    // animate the set
    var anim = Raphael.animation({
        opacity: 1
    }, 500);


    // second cube
    cube2.push(
    paper.path("M190 200 L260 160 330 200 260 240 190 200"),
    paper.path("M260 240 L330 200 330 280 260 320 260 240"),
    paper.path("M260 240 L260 320 190 280 190 200 260 240"));

    cube2.transform("t0 -80").attr({
        stroke: "#000000",
        opacity: 0
    }).animate(anim.delay(500));

    // hover for set
    function getHoverHandler(setName, fill1, fill2, fill3, swidth) {
        return function () {
            setName[0].attr({
                fill: fill1,
                cursor: "pointer",
                    "stroke-width": swidth
            });
            setName[1].attr({
                fill: fill2,
                cursor: "pointer",
                    "stroke-width": swidth
            });
            setName[2].attr({
                fill: fill3,
                cursor: "pointer",
                    "stroke-width": swidth
            });
        };
    }
    cube2.hover(getHoverHandler(cube2, "#000000", "#1e1e1e", "#282828", 0), getHoverHandler(cube2, "none", "none", "none", 1));
    // function for easy class setting
    function setClass(cubename, attrname) {
        for (var i = 0; i < 3; i++) {
            cubename[i].node.setAttribute("class", attrname);
        }
    }
    // func ends
    setClass(cube2, "secondcube");
    // calling tooltipster on each set
    $('.secondcube').tooltipster({
        content: "second cube",
        position: "left"
    });

})();

Answer 1

使用以下更改将为您提供所需的输出。

(function () {
    var paper = Raphael("paper", "100%", "100%");
    var cube2 = paper.set();
    // animate the set
    var anim = Raphael.animation({
        opacity: 1
    }, 500);


    // second cube
    cube2.push(
    paper.path("M190 200 L260 160 330 200 260 240 190 200"),
    paper.path("M260 240 L330 200 330 280 260 320 260 240"),
    paper.path("M260 240 L260 320 190 280 190 200 260 240"));

    cube2.transform("t0 -80").attr({
        stroke: "#000000",
        opacity: 0
    }).animate(anim.delay(500));

    // hover for set
    function getHoverHandler(setName, fill1, fill2, fill3, swidth) {
        return function () {
            setName[0].attr({
                fill: fill1,
                cursor: "pointer",
                    "stroke-width": swidth
            });
            setName[1].attr({
                fill: fill2,
                cursor: "pointer",
                    "stroke-width": swidth
            });
            setName[2].attr({
                fill: fill3,
                cursor: "pointer",
                    "stroke-width": swidth
            });
        };
    }
    cube2.hover(getHoverHandler(cube2, "#000000", "#1e1e1e", "#282828", 0), getHoverHandler(cube2, "none", "none", "none", 1));
    // function for easy class setting
    function setClass(cubename, attrname) {
        for (var i = 0; i < 3; i++) {
            cubename[i].node.setAttribute("class", attrname + i);
        }
    }
    // func ends
    for (var i = 1; i <= 3; i++) {
    setClass(cube2, "secondcube"+i);
    }

    // calling tooltipster on each set
    $('.secondcube30').tooltipster({
        content: "second cube",
        position: "left"
    });

})();

勾选Fiddle.

只有上部悬停才会显示工具提示。

Answer 2

就像我之前告诉你的那样，我认为你有两种不同的解决方案，一种使用内联 SVG 和 CSS，另一种使用 Rapahael 和 Javascript。我更喜欢第一个，但我将向您展示两者的示例。

内联 Svg CSS:

HTML:

<body>
<svg height="100%" version="1.1" width="100%" xmlns="http://www.w3.org/2000/svg">
<g id="cube">
<path id="f1" d="M190,200L260,160L330,200L260,240L190,200"></path>
<path id="f2" d="M260,240L330,200L330,280L260,320L260,240"></path>
<path id="f3" d="M260,240L260,320L190,280L190,200L260,240"></path>
</g>
</svg>
</body>

CSS:

svg {
    position:absolute;
    left:0;
    top:0;
}
#cube {
    fill:white;
    stroke:black;
    cursor:pointer;
}
#cube:hover #f1 {
    fill:black;
}
#cube:hover #f2 {
    fill:#1e1e1e;
}
#cube:hover #f3 {
    fill:#282828;
}

JQUERY:

$('#cube').tooltipster({
    content: "second cube",
    position: "left"
});

http://jsfiddle.net/zd33x1et/

拉斐尔：

var R = Raphael("paper");
var coor = [[130,170],[270,90],[410,170],[410,330],[270,410],[130,330]];
var toolText = ["first cube", "second cube", "third cube", "fourth cube", "fifth cube", "sixth cube"];
var cube =[];
var ed = [];
var i = 0;
function ont(n) {
    cube[n].hover(function(){
        cube[n].attr({"fill-opacity":"1"})
    }, function(){
        cube[n].attr({"fill-opacity":"0"})
    });
};
for(i=0;i<coor.length;i++){
R.setStart();
R.path("M0,0l-70,-40 70,-40 70,40 -70,40").attr({fill:"#000"});
R.path("M0,0l70,-40 0,80-70,40 0,-80").attr({fill:"#1e1e1e"});
R.path("M0,0l0,80 -70,-40 0,-80 70,40").attr({fill:"#282828"});
ed[i] = R.path("M0,0l0,80 M0,0l70,-40 M0,0l-70,-40 0,80 70,40 70,-40 0,-80-70,-40-70,40");
ed[i].node.setAttribute("id","edges"+i);
cube[i] = R.setFinish();
cube[i].transform("t" + coor[i][0] + "," + coor[i][1]).attr({"fill-opacity":"0", "cursor": "pointer"});
ont(i);
$('#edges'+i).tooltipster({
    content: toolText[i],
    position: "left"
});
}

http://jsfiddle.net/77nfejnz/2/

将工具提示应用于 Raphael 中的一组而不是每一侧

Apply tooltip to a set in Raphael not for each side

javascript

jquery

css

svg

raphael