How to change font size of tooltip?


Topic: How to change font size of tooltip?

pawled asked 3 years ago

Now text inside tooltip is normal size. I want to make it smaller. Simply.


Grzegorz Bujański staff answered 3 years ago

Try to set up custom class for the popup and add styles:

<p>
  Hover the link to see the
  <a href="#" data-mdb-toggle="tooltip" data-mdb-custom-class="text-sm" title="Hi! I'm tooltip">tooltip</a>
</p>

.text-sm .tooltip-inner {
  font-size: 0.5rem;
}

pawled commented 3 years ago

Is it impossible to assign different size to "original" tooltip?


Grzegorz Bujański staff commented 3 years ago

What do you mean by "original" tolltip?


pawled commented 3 years ago

Editing inside the scss file and new build.


Grzegorz Bujański staff commented 3 years ago

You can change the variable $ tooltip-inner-font-size and assign it a new value. You will find this variable in src/mdb/scss/free/_variables.scss. Remember that this will change the text size of all tooltips.


pawled answered 3 years ago

Tooltip after few appearances stops to appear. Is it a bug? I use Chrome.


Wojstan staff answered 3 years ago

Thanks for Your report. We will fix this as soon as possible.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: 3.0.0
  • Device: Any
  • Browser: Any
  • OS: Any
  • Provided sample code: No
  • Provided link: No