How to set a tooltip width dynamically?

Question

I want to create a tool-tip that will have flexible size according to the text length. For example, I have the following tool-tip:

Now, for this text, the width is OK (fixed in the css). But, when I have a very smaller string:

the tool-tip looks too big. My question is: how do I make the tool-tip flexible according to the text length? Is there a way to do this in the .css maybe? I work with d3.js, so an answer from this point of view would be acceptable too.

Thank you in advance for your answer!

EDIT: I use this tutorial in order to accomplish my goal, my code is something like that (not exactly, but close enough). It would be best to provide an answer based on that example, since my code is too big to post here.

Solution 1

You can do that with CSS, just use min-width and max-width together instead of width

Also you can simply remove width from your CSS or change it into width: auto;

Solution 2

the css for the tooltops looks like this (according to your link)

div.tooltip {   
  position: absolute;           
  text-align: center;           
  width: 60px;                    /* Width and Height are fixed */            
  height: 28px;                 
  padding: 2px;             
  font: 12px sans-serif;        
  background: lightsteelblue;   
  border: 0px;      
  border-radius: 8px;           
  pointer-events: none;         
}

Try removing the width property of the CSS. Above you can see that this is set to a fixed-width of 60 pixels.

Comments

[Belphegor]

That's not exactly what I'm looking for. Tnx for the answer anyway!

[MujtabaFR]

@Belphegor I've updated the answer, take a look at it

[Belphegor]

What an obvious answer, lol! Can't believe I didn't try with removing the width from the css. Tnx a lot!

[Belphegor]

Yeah, it works like that, tnx for the answer! Anyway, @Mujtaba Fathel has answered few seconds before you, sorry, I should accept his answer. +1 for the answer, though!