Styling button tooltip

Question

Is it possible to style the tooltip of a button, created by:

<button title="Hi!">Button</button>

I would like to change the font family.

Thanks.

No, it's not possible. The best you could do is ignore the title attribute and use a JavaScript library that builds its own tooltips. — j08691, Oct 08 '18 at 16:37

score 4 · Answer 1 · answered Oct 08 '18 at 17:29

So you can't directly change the styles that the tooltip uses, but there are options for creating custom tooltips.

Custom Tooltips seem to follow a few basic approaches - JS library - CSS using nested span attributes - CSS using custom classes or attributes

I feel like the best approach for a custom tooltip is to use a CSS solution using a .tooltip class and ::before and ::after pseudo-elements

A simple example might look something like this:

HTML

<button class="tooltip" data-title="Hi!">Button</button>

CSS

.tooltip {
   position: relative;
}
.tooltip::before {
   background-color: white;
   border: 1px solid #888;
   border-radius: 2px;
   color: #444;
   content: attr(data-title);
   display: none;
   font-family: sans-serif;
   font-size: 14px;
   padding: 2px 5px;
   position: absolute;
   top: 20px;
   left: 5px;
   z-index: 1;
}
.tooltip:hover::before {
   display: block;
}

A few other good links:

A good guide: https://medium.freecodecamp.org/a-step-by-step-guide-to-making-pure-css-tooltips-3d5a3e237346

W3's nested span example: https://www.w3schools.com/css/css_tooltip.asp

A simple example: http://jsfiddle.net/hari_shanx/1rbnLbbx/

Animated Tooltips: https://codepen.io/neogomo/pen/BjqJzr

score 2 · Answer 2 · answered Oct 08 '18 at 17:32

You can use pseudo class to make your custom tooltips.

    button { margin: 10px; }
    button:hover:after { 
        content: "Hi"; 
        font-family: Arial;
        position: absolute;
        top: 0;
        width: 20px;
        height: 1.25rem;   
        background-color: gray;
        color: white;
    }

<button>Button</button>

score 0 · Answer 3 · answered Oct 08 '18 at 17:24

Yes you can change the tooltip title. But you need to create your own class Instead of TITLE"", see the example here:

See the HTML AND CSS CODE:

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
 font-family: consolas,monospace;
    position: absolute;
    z-index: 1;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}

<!DOCTYPE html>
<html>

<body>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

</body>
</html>

Run then you can see the Tooltip title would be changed.

Styling button tooltip

3 Answers3