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.

TABLE OF CONTENTS

• Prerequisites
• Option 1: Customize a specific Tooltip Design Element on your page
  • 1.1. Prepare the custom CSS code
  • 1.2. Open Custom CSS tab of the Tooltip Design Element
  • 1.3. Apply the Custom CSS
• Option 2: Customize all Tooltip Design Elements on your Site Collection
  • 2.1. Prepare the Custom CSS code
  • 2.2. Open Custom CSS Option in the Theme Builder
  • 2.3. Apply the custom CSS 

Prerequisites

• 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:

• Custom CSS Tab for ShortPoint Design Elements
• Apply Custom CSS from ShortPoint Theme Builder