New version of display inline not working-mine is just not consistent

I know the question about display:inline not working has been asked multiple times for varying circumstances, but I can't find my problem. It works but doesn't work, even in the same paragraph. I'm using a tooltip, which works great on desktop and mobile. Here is the page: https://coachcaudlecares.org/llltest.html Here is the css:

.tooltip {
  position: relative;
  display:inline;
  color: red;
  
}

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

  /* Position the tooltip */
  position: absolute;
  z-index: 1000;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

Here is a sample paragraph in html:

<p>During Jim&apos;s <div class="tooltip">toddler<span class="tooltiptext">Toddler Jim with mother, Ethyl Green Caudle, circa 1934<br/><img src=/images/toddlerjimandmom.jpg width="134"></span></div> years, his parents divorced. His mother, who had been adopted by Grady &quot;Grandpa Russell&quot; Sr., owner of the local <div class="tooltip">Russell Transfer Company<span class="tooltiptext">Russell Transfer vehicle<br><img src=/images/russelltransfer.png width="266"></span></div>, and Ida Jane House Russel, became a single mom during one of the most-difficult times in our country&apos;s history, the Great Depression.

I can't see any difference in the code that would make one display inline and one not. What am I missing? Thank you for any suggestions!

Solution

You can't put <div> elements inside of <p> elements—it's invalid HTML. <p> elements can only contain phrasing content, but <div> elements are flow content.

Browsers will often do unexpected things when they encounter invalid HTML. In this case, many browsers will close any open paragraph elements when they encounter an opening <div> tag.

If you need to wrap text inside a paragraph with an element that doesn't have semantic meaning, you should use a <span> element instead. It's the phrasing content equivalent of a <div> element.

<!-- this is invalid -->
<p>Lorem ipsum <div class="tooltip">dolor</div></p>

<!-- use spans instead -->
<p>Lorem ipsum <span class="tooltip">dolor</span></p>