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

tooltipContent | Text goes out of borders #63

Open
enkicoma opened this issue Mar 7, 2021 · 4 comments
Open

tooltipContent | Text goes out of borders #63

enkicoma opened this issue Mar 7, 2021 · 4 comments

Comments

@enkicoma
Copy link

enkicoma commented Mar 7, 2021

Describe the bug
A clear and concise description of what the bug is.
Using tooltipContent and inserted a long note/text, the text goes out of the box-border.

To Reproduce
Steps to reproduce the behavior:
use .tooltipContent((d, node) => Notes: ${node.data.description} )(document.getElementById("chart"));
node.data.description should return a long text.

Expected behavior
A clear and concise description of what you expected to happen.
If, I will play and do <br/> in the text - I see that the text can fulfil the tooltip height. This takes ages... I would prefer to have a hard stop on how many words I can use with tooltipContent or somehow to make the text automatically to take the shape of tooltipContent.

Screenshots
If applicable, add screenshots to help explain your problem.
Screenshot 2021-03-07 at 19 54 22

Desktop (please complete the following information):

  • OS: [e.g. iOS] MacOS
  • Browser [e.g. chrome, safari] Chrome
  • Version [e.g. 22] latest

Additional context
Add any other context about the problem here.
I found the css applied to tooltipContent, but not sure what do I need to change. Maybe we need to put the tooltipContent under a flex div?

.sunburst-tooltip {

@vasturiano
Copy link
Owner

@enkicoma you can just override the white-space to normal, in order to let it wrap in multiple lines.

@enkicoma
Copy link
Author

enkicoma commented Mar 8, 2021

@enkicoma you can just override the white-space to normal, in order to let it wrap in multiple lines.
Hi @vasturiano, good point - but how and where to override

      Sunburst()
        .data(newObject) //data[data.length-1]
        .label("name")
        .size("available")
        .color("color")
        // .tooltipContent((d, node) => `Notes: <i>${node.data.description} </i>`)
        (document.getElementById("chart"));      
    } 

@vasturiano
Copy link
Owner

@enkicoma you can override it in the css of your app. Something along the lines of:

.sunburst-tooltip {
  white-space: normal !important;
}

@adelmemariani
Copy link

adelmemariani commented May 3, 2023

I guess it is .sunburst-viz .tooltip {..} instead of .sunburst-tooltip {...}

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

No branches or pull requests

3 participants