html css tooltips on hover event can I make specific width?

Question

I have learned how to do basic tooltips, however, I need to specify a width for each one. The code that I'm using is from w3 schools:

<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 500px;
  background-color: black;
  color: #fff;
  text-align: left;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: -5px;
  left: 0%;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>

The tooltip text is set to 500px. I need to define each "span" a specific width:

<div class="tooltip">
this is the text to hover 
  <span class="tooltiptext">
this is the tooltip display
</span>
</div>

I have tried several ways to define the width ( <style="width: 800ps;"> text </style>) none of them have worked.

Answer 1

You can do it by having inline style. Remove width from.tooltip and give width for every like this:

<span class="tooltiptext" style="width: 100px;">

Answer 2

The best thing to do is to add an ID to your tooltip divs.

The easiest way to describe an ID is that it is a unique name giving for an element. For example instead of classes, that you can use on multiple elements. you can only use an id for 1 element.

in basic html and css it would look something like this:

html

<div class="test" id="DivOne">
    <p>ID ONE<p>
</div>

<div class="test" id="DivTwo">
    <p>ID TWO<p>
</div>

css

#DivOne{
    height: 200px;
    width:200px;
    background-color:red;
    color:white;
}
#DivTwo{
    height:200px;
    width:200px;
    background-color:black;
    color:white;
}

Answer 3

Hi @anothen,

In order for the browser to take into consideration your inline style, please remove the width property rule from your .tooltiptext CSS class and that will do the job. Don't forget to add the inline style width to the span as in the example below.

Last but not least, for the CSS span rules, you don't really need the .tooltip.tooltiptext syntax, you can leave it only with the .tooltiptext since this is merely affecting this element only.

I certainly hope this helps, pal!

 .tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; }.tooltiptext { visibility: hidden; background-color: black; color: #fff; text-align: left; border-radius: 6px; padding: 6px; margin: 0 auto; /* Position the tooltip */ position: absolute; z-index: 1; top: -5px; left: 0%; }.tooltip:hover.tooltiptext { visibility: visible; }

 <div class="tooltip"> This is the text to hover <span class="tooltiptext" style="width:300px"> This is the tooltip display </span> </div>

Answer 4

I figured it out, it was working, I just forgot to disable cache.