Tooltip indicators don't play well with code-formatted text

[damithc]

v2.14.1

Problem: the underline that indicates the tooltip doesn't show under text that are code-formatted

[ang-zeyu]

This is one of the drawbacks of using border to underlining things I suppose. We had issues with text-decoration: underline and icons in #995 though.

^ this is done by applying a descendant selector .trigger > code, but the issue occured because code elements have a background color which blocks the border behind it. Not too sure if there's a more generalizable solution. Could get some input from @acjh @yamgent

[ang-zeyu]

@damithc #1350 fixes this (as well as popover / tooltip positioning), but introduces the underline for everything. (note that its visible on buttons now as well)

the relavant style in #1133 was likely intentionally removed by @hcwong to avoid this

also note how the code element now increases the line height, this may not be desired

what do you think? @hcwong @damithc

[damithc]

what do you think? @hcwong @damithc

Both side effects are, as you noted, undesirable. Ideally, should avoid. If cannot, may be keep the current status quo for the time being?

[ang-zeyu]

current status quo for the time being?

I don't think there's a clean solution to this, best to decide which tradeoffs to accept =X

I really think the positioning should be fixed though, its not so pronounced in the case of buttons because its not very large;
if you add it to something like an image then its very visible

also note the line height disruption is only applicable when all the elements you place in the popover/trigger/tooltip are inline; If they are inline-block (e.g. buttons) its going to be disrupted eitherway

assuming display: inline-block which fixes the positioning, some possible approaches:

1. revert to text-decoration
   • underline support for things without text (e.g. fa icons) breaks entirely
2. keep border approach to underlining
   • underline appears for everything
   • line height is disrupted even when unnecessary because of the border
3. style detection, use text-decoration by default, border for elements without text
   • inconsistent styling between border and text-decoration approaches
   • small performance hit
4. keep border approach, provide a user option to use text-decoration instead of border
   • inconsistent styling between border and text-decoration approaches
   • extra work on user side

assuming no display: inline-block:

• positioning breaks in all cases when non-inline elements are involved (e.g. buttons, images)

1. revert to text-decoration
   • fontawsome icons don't show underlines to indicate modal/tooltip #995 regresses
2. keep border approach to underlining
   • this issue stays unresolved
3. style detection, use text-decoration by default, border for elements without text
   • inconsistent styling between border and text-decoration approaches
   • small performance hit
4. keep border approach, provide a user option to use text-decoration instead of border
   • inconsistent styling between border and text-decoration approaches
   • extra work on user side