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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...