Add 'title' to svg element

Question

Add 'title' to svg element

JuergenWeber opened this issue 9 years ago · comments

Would it be possible to add a 'title' to the svg element which shows the text when moving the mouse over that element?

Larry Azevedo · Answer 1 · Sat Feb 04 2017 01:54:21 GMT+0800 (China Standard Time)

I'm surprised this one hasn't been requested more often. I think many users would expect to see values when hovering over parts of a chart. @benpickles I would be more than happy to work with you on the details on this. Just let me know and I can draft something up.

Also, not to be picky but I think a more intuitive title for this issue would be Add tooltip to charts.

Ben Pickles · Answer 2 · Wed Feb 08 2017 05:22:16 GMT+0800 (China Standard Time)

Thanks for the offer, sounds good :) It's been requested in some form or another a few times... #2, #9, #29, #31, #55, #84

Larry Azevedo · Answer 3 · Wed Feb 08 2017 06:04:44 GMT+0800 (China Standard Time)

Ok, I'll try to get to it by next Monday.

Larry Azevedo · Answer 4 · Tue Feb 14 2017 13:16:26 GMT+0800 (China Standard Time)

Ok so here's my first crack at doing this for a pie/donut chart. I am by no means a JS guru. This is merely to get a concept across and start getting feedback. So here's a fiddle that I did: https://jsfiddle.net/larryazevedo/01v4oLuj/

As you can see, I'm suggesting the following:

Help the user know what part of a chart they're looking at by slightly changing the fill color on mouseover. This becomes more important on smaller charts.
Switch to SASS/CSS for fill colors:
- Makes peity charts easy to integrate into frameworks like Bootstrap, Foundation, etc
- Theming across an entire application would be much easier. Highcharts does this well.
- I realize this may feel like it would be a project in itself so if you would like, I can show you examples of how useful this can be and how I would set it up.
Have the tooltip accept a {{value}} and/or {{percent}} that can be used in the actual tooltip.
The tooltip itself should be outside the <svg> so as not to get clipped by the svg's viewBox.

@benpickles, I would appreciate your feedback on this.

PS: I'll start on bar chart tooltips after I get feedback on this one.

Ed Lomonaco · Answer 5 · Sat Feb 18 2017 04:22:54 GMT+0800 (China Standard Time)

I like that, it's exactly what I'm looking for.

Ben Pickles · Answer 6 · Tue Feb 21 2017 03:16:15 GMT+0800 (China Standard Time)

Thanks that's really useful. I've been thinking about this and will get back to you soon when I've got something concrete to show.

Larry Azevedo · Answer 7 · Thu Feb 23 2017 23:28:13 GMT+0800 (China Standard Time)

Here's my second attempt at this: https://jsfiddle.net/larryazevedo/khbkkjyv/13/

I'll tell you right now... it has it's flaws but I just wanted to get different ideas out there so it helps us brainstorm better ways to do it. I'll try to get something else to show you guys later in the next week or so.

Larry Azevedo · Answer 8 · Fri Feb 24 2017 02:43:16 GMT+0800 (China Standard Time)

@benpickles I know this is kinda off topic but I just wanted to throw this out to you before you start coding anything.

Let's look at the example you have on http://benpickles.github.io/peity/:

The current code:

<p class="data-attributes">
  <span data-peity='{ "fill": ["red", "#eeeeee"],    "innerRadius": 10, "radius": 40 }'>1/7</span>
  <span data-peity='{ "fill": ["orange", "#eeeeee"], "innerRadius": 14, "radius": 36 }'>2/7</span>
  ...
</p>

The proposed code:

<p class="data-attributes">
  <span data-peity='{ "class": ["fill-danger", "fill-gray-lighter"],    "innerRadius": 10, "radius": 40 }'>1/7</span>
  <span data-peity='{ "class": ["fill-warning", "fill-gray-lighter"], "innerRadius": 14, "radius": 36 }'>2/7</span>
  ...
</p>

So instead of outputting the fill attribute, it would output the class attribute; giving the user much more flexibility. I suppose you could give the ability to configure both the fill and class attributes but I don't know why anyone would want to do that. Actually, the more I think about it, the more I'm in favor of scraping the fill attribute altogether (in favor of using class).

Of course, we should include a Sass and CSS file when downloading Peity. I can help with that as well.

Let me know what you think?

Larry

Ben Pickles · Answer 9 · Fri Mar 10 2017 05:38:02 GMT+0800 (China Standard Time)

That's a really interesting suggestion. Would you mind creating a new issue for this so that it can be discussed independently.

Ben Pickles · Answer 10 · Fri Mar 10 2017 06:05:40 GMT+0800 (China Standard Time)

RE tooltips, I've made a tiny addition to include the element's value (not yet on master): 22f7ad9.

Here's an example of what it enables: https://jsbin.com/vufayan/edit?html,js,output

I don't think this is quite what you were hoping for but I'm wary of adding too much functionality to the library preferring instead to expose enough to enable extended uses. That said when combined with the (seemingly undocumented!) after hook I think there's much more potential to achieve what you're looking for - I'll have to get back to you with an example of this.

robbisy · Answer 11 · Sat Apr 29 2017 10:27:34 GMT+0800 (China Standard Time)

@benpickles
Your example doesn't work
give me "error"
"@vufayan.js:33:6" on console

Ben Pickles · Answer 12 · Sun Apr 30 2017 18:04:07 GMT+0800 (China Standard Time)

Thanks @robbisy. Possibly due to http://stackoverflow.com/a/18049842/194664, should be fixed now.

j4$0n · Answer 13 · Thu Jun 15 2017 18:56:23 GMT+0800 (China Standard Time)

@benpickles
Your example is great.
And any plan to merge the changes into master?

Michael · Answer 14 · Mon Jul 31 2017 05:16:32 GMT+0800 (China Standard Time)

It has a bug. Just change   to  

Ed Lomonaco · Answer 15 · Wed Jan 17 2018 04:07:29 GMT+0800 (China Standard Time)

Do we have an ETA of when this will be available? I'd love to use this on a project I'm working on

Ben Pickles · Answer 16 · Thu Jan 18 2018 21:45:06 GMT+0800 (China Standard Time)

@eman1986 good point, I've just released version 3.3.0 that includes the relevant commit.