Is there a way to customize a title? I want it to have a red background, but I'm not seeing any way to do it. If there is a simple way to do that that would be great!

.box {
  background-color: red;
  height: 50px;
  width: 50px;
  text-align: center;
}

<div title="Hi!" class="box">Hi!</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You can add pseudo element and show it on hover.

Example

.box {
  background-color: red;
  height: 50px;
  width: 50px;
  text-align: center;
  position: relative;
}

.box:before {
  content: "Hi!";
  display: none;
  position: absolute;
  right: -30px;
  width: 50px;
  height: 20px;
  background: blue;
}

.box:hover:before {
  display: block;
}

<div class="box">Hi!</div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

<style>
    .box {
      width: max-content;
      text-align: center;
      position: relative;
    }

    .box:hover {
      background-color:red;
      color:black;
    }
</style>

<div class="box">Hi!</div>