marmelab/EventDrops

Left label identification by class or id

szwalkowski opened this issue · 4 comments

It'd be nice to have way to hook anything to line-labels. Like tooltips when mouse over. atm only way to find it, is a txt that and it changes when user scroll it.
maybe even integrated tooltip mechanism for that :)

I actually have that functionality implemented somewhere.

You could make the chart add a div and then position the tooltip, however as the chart is not returning a div to wrap it in, I don't think that would be a nice solution.

The demo example shows how one can add it to the drops. Currently, I have something similar, where I attach a callback on mouseover on the text labels. In D3 it's easy to get the value and it works quite well. Maybe also add ellipisis to the text (the name) and not the numbers, so in case the text get's quite big it can overflow? Or maybe allow setting a different font-size.

Personally, I use popper.js to position the tooltip as some of mine are quite big.

@Sarseth
Here is an example of what I have done in the past:

I use a function to get the text length (as font's differ) then if the length is more, I shorten it until it will fit the screen, as well as ...;
Too long desc ... (120)
Then when I do

.text(function(d) {
 // Add the text and any logic you need
// If the length is too long, add a shortName to the data element
}).on('mouseover', function(d) {
 if (d.shortName !== undefined) {
    onMouseOver(d);
 }
})

Example:
EventsDrop_short_description

Edit:
It's not as clean as I would like it to be. But if I got time and it works somewhat correctly, I will make a PR.

Awesome, thanks, will tinker with what you provide here tomorrow :)

So I made a PR to expose the onMouseOver and onMouseOut here: #273
If you download the files and then run the make command you can include the files into your project and take it from there.

Here is an example, where index.js is the EventDrop with the tooltip added (Couldn't paste it on JsBin as too large).
Github gist