Is it possible to put a list inside a span tag?

Question

I'm aware that <span> tag is an inline element while <li> is a block element. However, we have a tooltip that uses a <span> tag and we'd like to make the text inside that tooltip into a list. However, putting <ul><li> inside span doesn't work in all browsers (and it's invalid).

This is the HTML code:

<a class='tooltip'>Text<span>Text that we want to become a list</span></a>

Is there a possible work around?

Answer 1

Although I would not worry to much about invalid code in this instance, given that you know about it, if the ul li is breaking in some of the code, you could do the following, which is also probably invalid:

<a class='tooltip'>Text<span>List item 1<br />
                             List item 2<br />
                             List item 3</span></a>

Answer 2

I think the technical answer you could be looking for is that the tooltip text should go inside the title attribute of the anchor tag itself.

<a href="link.htm" title="&bull;List item 1 &#10; &bull;List item 2 &#10;">Text</a>

It's still not "beautiful" but semantically it's closer to what you're looking for. Plus you can use javascript to pluck that title value from the anchor tag to do something prettier with.