How to change the font size global for all tooltip s?

asked 2014-05-14 14:48:49 +0800

salbader gravatar image salbader
15 5

updated 2014-05-28 11:30:42 +0800

sitansu gravatar image sitansu
2254 13

Hello, i can 't find the css class to fix it.

delete flag offensive retag edit


It depends a bit, are you using the "tooltip" attribute together with a <popup> component or just the "tooltiptext" attribute?

cor3000 ( 2014-05-26 06:53:54 +0800 )edit

3 Answers

Sort by ยป oldest newest most voted

answered 2014-05-28 05:07:49 +0800

cor3000 gravatar image cor3000
6280 2 7

A Tooltip usually refers to a popup which can contain any ZK component. To globally change the font you can use a css rule like this:

.z-popup-content * { 
  font-size: 40px;

You can check the result here on ZK-Fiddle

If you want to change the style for a specific component (e.g. label) you can use

.z-popup-content .z-label { 
  font-size: 40px;


link publish delete flag offensive edit


hello, your solution does not work for me. at this way i set the tooltip. maybe that helps you to help me :)

<label sclass="fa-info-circle" tooltiptext="I am a tooltip" />

salbader ( 2014-05-28 08:52:55 +0800 )edit

that's unfortunate... as I deliberately asked whether you used "tooltip" or "tooltiptext", now you are telling me the opposite does not work. please read carefully before you give a misleading answer.

cor3000 ( 2014-05-28 09:10:25 +0800 )edit

answered 2014-05-28 09:37:19 +0800

cor3000 gravatar image cor3000
6280 2 7

Sorry for my comment, don't get me wrong, I am trying to help and invest quite some time into it, so please also take the time to avoid confusions.

You cannot style the native browser tooltip originating from the html title attribute (which is set by the tooltiptext attribute on a ZK component).

However the link contains a CSS technique that can be applied to a ZK component using a client/attribute and pure CSS.

<div ca:data-tip="this is a custom CSS tooltip">hover for a css tooltiptext</div>

Also check out the updated ZK-Fiddle example.

link publish delete flag offensive edit


no problem. i understand your position. thanks allot for your answer.

salbader ( 2014-05-28 11:29:17 +0800 )edit

answered 2014-05-20 01:57:40 +0800

mhj gravatar image mhj flag of Brazil
806 1 7

updated 2014-05-20 02:05:30 +0800

Hello salbader, for to change global properties for any component you need overwrite him. look at the links below:



the css class is popup i guess...

link publish delete flag offensive edit


thanks i will try and tell you as soon as possible.

salbader ( 2014-05-26 10:18:29 +0800 )edit

i am using just the tooltip attribute and i can 't find the class to fix it.

salbader ( 2014-05-27 13:14:51 +0800 )edit

btw small video how I usually identify css classes : http://screencast.com/t/7RyGP3TxJgy3

cor3000 ( 2014-05-28 05:11:37 +0800 )edit

thanks. but it does not work. look at my comment under Robert s last

salbader ( 2014-05-28 08:56:29 +0800 )edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools




Asked: 2014-05-14 14:48:49 +0800

Seen: 47 times

Last updated: May 28 '14

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More