Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Left label identification by class or id #272

Open
szwalkowski opened this issue Jun 18, 2019 · 4 comments · May be fixed by #273
Open

Left label identification by class or id #272

szwalkowski opened this issue Jun 18, 2019 · 4 comments · May be fixed by #273

Comments

@szwalkowski
Copy link

szwalkowski commented Jun 18, 2019

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 :)

@Busteren
Copy link
Contributor

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.

@Busteren
Copy link
Contributor

Busteren commented Jun 19, 2019

@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.

@szwalkowski
Copy link
Author

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

@Busteren
Copy link
Contributor

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

@Busteren Busteren linked a pull request Aug 29, 2019 that will close this issue
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants