How to Customize the Design of the Tooltip Title in the Tooltip Design Element Using Custom CSS

color: red;
font-size: 28px;

color: red;
font-size: 28px;

Step 3: Edit the Tooltip Design Element

NOTEBefore proceeding, make sure you already have the Tooltip Design Element on your page. To add it, check out How to Customize the Tooltip Design Element.

• Click the Tooltip tag:

• Select the cogwheel icon:

Step 4: Paste the code

• Click the next icon:

• Go to the Custom CSS tab.
• Paste the code.

Step 5: Save

• Click the green check mark.
• Click the eye icon to see your page in real-time:

• Click Save to apply your changes:

Option 2: Customize All Tooltip Titles on your Site Collection

This option allows you to customize the color and font size of all Tooltip titles on your site collection. Copy the code below and click Get Started:

.sp-type-tooltip {  color: red !important;  font-size: 32px !important;}

Step 1: Open Theme Builder

NOTEBefore proceeding, make sure you already have the Tooltip Design Element on your page. To add it, check out How to Customize the Tooltip Design Element.

• Go to the SharePoint page you want to use and click the ShortPoint icon:

• Select Theme Builder.

Step 2: Copy the Code

• Copy the Custom CSS code below:

.sp-type-tooltip {  color: red !important;  font-size: 32px !important;}

• Go to Utilities:

• Select Custom CSS:

• Paste the code.
• Customize the color and font-size values according to your preferences.
• Click Apply:

Step 4: Publish

• Once satisfied, click Publish:

That’s it! You've now learned how to customize the appearance of Tooltip titles in your Tooltip Design Elements.

Related articles:

• Custom CSS Tab for ShortPoint Design Elements
• Apply Custom CSS from ShortPoint Theme Builder
• How to Disable the Default Tiles Animation