The word disappeared after I entered in the definition a term which was also part of the dictionary. More surprising is that it keeps disappearing even after I remove the offending term. From looking at the generated HTML, I see markup is mangled with some overlapping <span> and some <br> tags. What seems to be correcting the problem (including allowing the display of a term definition that contains another term) is to enclose the whole paragraph in the raw shortcode – [ raw ] (without spaces)…

Test with the [ raw ] shortcode

  • Here is the word testy.
  • Here is the word testy2.
  • Here is the word testy2 which should have a tooltip referencing testy.

The examples below do not use the raw shortcode and it gets screwed up… It seems the WordPress PHP processor (or is it the theme) keeps inserting some <br> inside your <span> and that is the issue. I am not sure why initially using a term inside the tooltip that is already in the dictionary would have triggered the problem and I do not have a clear repro for it… maybe these are different issues.

Any ideas?

Test without the [ raw ] shortcode

The examples below are same as above but without enclosing each one in the [ raw ] shortcode. See how the first line disappeared comletely, the second line contains a weird tooltip and the second tooltip in the third line has disappeared as well.

  • Here is the word testy.
  • Here is the word testy2.
  • Here is the word testy2 which should have a tooltip referencing testy.

Use HTML tags for definition term <dt> and definition list <dl>

Definition list
Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
Lorem ipsum dolor sit amet
Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.

Test code formatting


#header h1 a {
	display: block;
	width: 300px;
	height: 80px;
}

Ready to make an impact online? Let us show you how we can help you succeed. Contact us for a free consultation!