将工具提示添加到使用svg路径生成的条形图 [英] Adding tooltip to bar chart generated using svg path

问题描述

我如何添加一个工具提示到使用svg路径生成的barchart中的每个栏...可以使用bootstrap工具提示...？
我已经在下面提供了我的svg路径

 < path class =foreground barclip-path =url （#clip 0）d =M36,100V68h20V100M108,100V29h20V100M180,100V71h20V100M252,100V-4h20V100M324,100V87h20V100/> 
  

我已经在下面提供了svg生成的barchart http://jsfiddle.net/mfAc4/6/ ...
如何添加工具提示到每个栏？

解决方案

不知道bootstrap是什么意思，但大多数UA将标题元素子转换为工具提示。例如

 < path class =foreground barclip-path =url（#clip 0）d =M36 ，100V68h20V100M108,100V29h20V100M180,100V71h20V100M252,100V-4h20V100M324,100V87h20V100 
< title> tooltip text< / title> 
< / path> 
  

how can i add a tooltip to each bar in a barchart generated using svg path... Is it possible to use bootstrap tooltip...? I have provided my svg path below

 <path class="foreground bar" clip-path="url(#clip 0)" d="M36,100V68h20V100M108,100V29h20V100M180,100V71h20V100M252,100V-4h20V100M324,100V87h20V100"/>

I have provided the svg generated barchart in below fiddle http://jsfiddle.net/mfAc4/6/ ... How can i add tooltip to each bar ??

Any suggestions would be appreciated.

解决方案

Not sure what you mean by bootstrap, but most UAs will turn a title element child into a tooltip. E.g.

<path class="foreground bar" clip-path="url(#clip 0)" d="M36,100V68h20V100M108,100V29h20V100M180,100V71h20V100M252,100V-4h20V100M324,100V87h20V100">
    <title>tooltip text</title>
</path>

这篇关于将工具提示添加到使用svg路径生成的条形图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！