Question 46010 in CSS Question posted in
Some basic documentation can be found here.

Different Behavior of Span on Firefox and Chrome – CSS

I’m trying to make a tooltip feature that when user hover to a span, the extra information will show up. However, when the span is split on 2 different lines, the extra information appears at 2 different positions on Firefox and Chrome.

Firefox vs Chrome

The left image is on Firefox, and the right side is Chrome. I’d prefer the behavior on Firefox because the extra information is closer to the original span. So how can I fix it specifically for Chrome? Thank you so much.

My code currently:

    .current-span {
        position: relative;
    }

    .current-span:hover .extra-information {
      visibility: visible;
    }

    .extra-information {
        visibility: hidden;
        width: max-content;
        background-color: var(--color-fg);
        color: var(--color-bg);
        text-align: center;
        border-radius: 5px;
        padding: 3px;

        /* Position the tooltip */
        position: absolute;
        z-index: 1;
        top: 110%;
        left: 50%;
        transform: translateX(-50%);
    }
<span class="current-span">
  <span class="extra-information">rs1</span>
  <span>Text</span>
  <span>Text</span>
  <span>Text</span>
  <span>Text</span>
  <span>Text</span>
  <span>Text</span>
  <br>
  <span>Text</span>
  <span>Text</span>
</span>
Tags:

2

Answers


  1. 0

    The default behavior of the display property for span might not be the same in different browsers. I usually explicitly set it.
    This will do:

    .current-span {
    position: relative;
    display: block;
}
    Login or Signup to reply.
  2. 0

    The reason you experience different behaviour has nothing to do with <span>. It’s how Firefox and Chrome outline text.

    Firefox outlines text "smarter" just like you noticed. However, it is not possible to make Chrome replicate the same behaviour easily.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search