Jump to content

css tooltips; I need to define specific width for each span


Recommended Posts


Here is the code from w3:

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


Here it is inside body:

<div class="tooltip">
text text text
  <span class="tooltiptext">
  <!-- <span class="tooltiptext" width: 800px;>  did not work -->
  <!-- <style="width; 800px"> tooltip text </style> did not work -->
tooltip text

I need to set a specific width for each tooltip.  I have tried several ways: " . style="width: 800px /. " but it did not work

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...