CODEWITHSUNDEEP
javascripthtmlcssgoogle-chrome
FlatAssembler
FlatAssembler

Reputation: 782

Tooltips work in Firefox but not in Chrome

In my web-app, I implemented some tooltips on buttons with images. In Firefox, they work as expected, that is, they appear right below the button when you hover over that button. However, in Chrome, they appear far left of the button.

CSS:

      .tooltip {
        display: none;
      }
      button:hover .tooltip {
        display: block;
        position: absolute;
        background: #ffffaa;
        z-index: 10;
        padding: 2px;
        font-style: italic;
        font-family: Times;
      }

HTML:

      <div id="simulationButtons">
        <button id="playPauseButton">
          <img
            src="play.svg"
            alt="play"
            id="playImage"
            style="display: inline"
          />
          <img
            src="pause.svg"
            alt="pause"
            id="pauseImage"
            style="display: none"
          />
          <span class="tooltip">Play/Pause</span>
          <!--Didn't know modern browsers don't display alts automatically
              when you hover over an image.-->
        </button>

This works as expected in Firefox (this is Firefox for Android, but it looks similar on desktop): What it looks like in Firefox

However, for some reason, in Chrome, tooltips are moved to the left of the button (this is Chrome on Android, I haven't managed to install Chrome on my Linux, but I think it will look similar in Chrome on desktop): What it looks like in Chrome

So, what is going on in Chrome? How can I fix it?

Upvotes: 1

Views: 1022

Answers (2)

Zia Ahmad
Zia Ahmad

Reputation: 190

You are using position:absolute to position the tooltip so the parent "button" should have position:relative

Add this code in your css and it will work fine.

#playPauseButton, #fastForwardButton, #singleStepButton, #stopButton {
    position: relative;
}

Whenever you make new buttons like these, make sure to add position:relative to that button too.

Upvotes: 1

dippas
dippas

Reputation: 60573

You need to set position:relative in <button id="playPauseButton"> or in <div id="simulationButtons">

Upvotes: 2

Related Questions