How can we help you today?

How to Customize the ShortPoint Tooltip Design Element with Custom CSS

Using the Custom CSS feature, you can update the default look or behavior of the ShortPoint Design Elements.

In this article we will show you how you can customize the Tooltip Design Element.



  • You are using Office 365 or SharePoint 2019 environment.
  • You have successfully installed ShortPoint on your site(s).
  • You are a ShortPoint user with an active license.

There are two options on how you can customize the ShortPoint Tooltip Design Elements:

  • A single Tooltip Design Element on your page;
  • All Tooltip Design Elements within your Site Collection.

Option 1: Customize a specific Tooltip Design Element on your page

1.1. Prepare the custom CSS code

For changing the color of your Tooltip:

	color: red;

Note: Change the color to your own preferred color, it can be the named color or the HEX code color e.g. white or #FFFFFF.

For increasing the font size of your Tooltip:

	font-size: 28px;

Note: Select the appropriate size in % or px e.g. 15% or 25px.

1.2. Open Custom CSS tab of the Tooltip Design Element

Edit the page. Open the Tooltip settings by pressing the cog wheel icon:

Switch to the Custom CSS tab:


1.3. Apply the Custom CSS

Paste the custom CSS code from the step 1.1. to the Custom CSS field:

Click Update to save the changes:

Option 2: Customize all Tooltip Design Elements on your Site Collection

You can achieve it by using the Custom CSS option in the Theme Builder.

2.1. Prepare the Custom CSS code

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

2.2. Open Custom CSS Option in the Theme Builder

  • For SharePoint Online and SharePoint On-Premise 2019, please navigate to Site Contents > ShortPoint Dashboard > Theme Builder >  choose the type of TB you will be working with, Classic or Modern > Customize my Site.
  • For SharePoint On-Premise 2013 and On-Premise 2016, please navigate to Site Settings > Site collection Administration > ShortPoint Dashboard > Theme Builder > Customize my Site.

Navigate to Utilities:


Click the Custom CSS option:

2.3. Apply the custom CSS 

Paste the custom code from the step 2.1. to the Custom CSS field:

Click Apply and Publish to save you customizations:

That's it. Happy customizing!

Related articles:

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.

World's best intranet sites are designed using ShortPoint

Get started today! Learn more
See all 54 topics

Start a trial

Ignite your vision. Install ShortPoint directly on your site, or play in sandbox mode. No credit card required.

Get started today

World’s best intranet sites are designed using ShortPoint

Thousands of companies using ShortPoint everyday to design, brand and build award winning intranet sites.

Get started Learn more