2

I want to change the font size of my tooltips in my table. No matter what I do nothing seems to change. Below is all my code excluding the HTML as its a bit big, but here is my jsfiddle

My JS code

 $(function () {
$("[data-toggle='tooltip']").tooltip();
});

My CSS

 .tableFixHead{ 
overflow: auto; 
height: 100px; 
width: 240px; 
}

.tableFixHead thead th { position: sticky; top: 0; z-index: 1; }
.tableFixHead tbody th { position: sticky; left: 0; }

.table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
  background-color: aqua;}

 .table th:first-child,
 .table td:first-child {
   position: sticky;
   left: 0;
   background-color: #6a85b0;
   color: #373737;
   font-weight: bold;
  }

.tooltip .tooltiptext {
   visibility: hidden;
   width: 120px;
   background-color: black;
   color: #fff;
   text-align: center;
   padding: 5px 0;
   border-radius: 6px;
   font-size: 20px;
   position: absolute;
   z-index: 1;
   }
mHelpMe
  • 6,336
  • 24
  • 75
  • 150
  • 1
    It's not possible to modify the default browser's display of the `title` attribute text. The only way to do it is to make a custom tooltip instead of relying on the one provided by the browser. You can find some examples for that in [this question](https://stackoverflow.com/questions/2011142/how-to-change-the-style-of-the-title-attribute-inside-an-anchor-tag) The title attribute is usually meant for visually impaired people, who need their devices to read the title attribute out loud. In which case the text size doesn't matter to them anyway. – icecub Jul 07 '22 at 18:23

1 Answers1

0

Have you tried the following CSS property yet?

  • font-size: built-in values
  • large, larger, medium, small, x-large

example:

 .tableFixHead{ 
overflow: auto; 
height: 100px; 
width: 240px; 
font-size: x-large;
}
Klark kalahan
  • 1
  • 1