2016-11-07 108 views
-1

我有我的图表在这里摆弄。我想用箭头制作工具提示。我可以在d3中做到这一点吗? attached fiddle of graph我可以在d3中将工具提示附上箭头吗?

CSS的工具提示NOW-

.hor_tooltip { 
position: absolute; 
width: 50px; 
height: auto; 
padding: 10px; 
background-color: white; 
-webkit-border-radius: 10px; 
-moz-border-radius: 10px; 
border-radius: 10px; 
-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4); 
-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4); 
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4); 
pointer-events: none; 
display:none 

回答

1

您可以添加

.hor_tooltip:after { 
    left: 100%; 
    top: 50%; 
    border: solid transparent; 
    content: " "; 
    height: 0; 
    width: 0; 
    position: absolute; 
    pointer-events: none; 
    border-color: rgba(255, 255, 255, 0); 
    border-left-color: #ffffff; 
    border-width: 10px; 
    margin-top: -10px; 
} 

https://jsfiddle.net/c74eoo2b/12/