Adding data-hint removes bullets for <li> elements

[jamesfzhang]

For any li element, adding the data-hint attribute removes the element's bullet. For example, see this jsfiddle.

[chinchang]

Ah, its happening because of the display: inline-block that Hint puts on the element. One way to get back those bullets is to apply list-style explicitly on the element...but that is just a hacky way to make it work. I'll think how I can fix this somehow.

[jamiebuilds]

You could apply the tooltip to an inner element, otherwise you'll have to do this (or something similar):

ul, ol {
  *zoom: 1;
}

ul:before, ul:after,
ol:before, ul:after {
  content: ' ';
  display: table;
}

ul:after, ol:after {
  clear: both;
}

li.hint,
li[data-hint],
li.hint ~ li,
li[data-hint] ~ li {
  float: left;
  clear: both;
  display: list-item;
}

You can't just apply list-style because it won't apply to non elements without a list display type. Applying display: list-item doesn't fix it entirely because the tooltip will be centered to a full width. So applying float: left will make it centered correctly, but then you need to fix the rest of the <li>'s and clearfix the ul or ol which you can only do by clearfixing all ul's and ol's without requiring an additional class.

[jamiebuilds]

Should there maybe me a modifier class that can handle block level elements?