Button with Pop-up Content

The component to enrich your SharePoint intranet's pages without making navigation cumbersome.

What is Button with Pop-up Content

This web part facilitates the promotion of corporate initiatives, showcases intranet features, and ensures convenient access to external websites through captivating new graphics.

You can personalize button icons to offer clues about their content, enticing users to explore further without navigating away from the current page. By hovering the cursor over the graphics, hidden information is effortlessly unveiled.

Explore the advantages of Intranet.ai Button with Pop-up Content by clicking here to learn more.

Add the Button with Pop-up Content web part to a SharePoint page

If your page is not already in edit mode, click Edit at the top right of the page.
Hover your mouse above or below an existing web part and you'll see a line with a circled +, like this:
Click on it and, in the web part search box, enter Hover Button to quickly find and select the Button with Pop-up Content web part, which is named IAI-Hover button.

Click the Edit button on the left of the web part to open the property pane and set options such as Front Button, Back Button and Colors settings. See below for more information on each of these options.

Please note, the button takes up the entire size of the SharePoint section.

Therefore, you need to select the section size choosing from the different layouts, and the button size will adapt accordingly, as shown below:

Configuration

Front Button Settings

In this section, you'll configure the icon and the title associated to the button.

Buttons are strategically crafted to grab users' attention, enticing them to delve into hidden content. The titles and icons are there to guide them to the information they seek, saving time that would otherwise be spent searching or navigating various pages on the website.

If you're not in edit mode already, click Edit at the top right of the page.
Select the Hover Button web part, then click Edit web part on the left side of the Hover Button web part.

Complete the tabs as follows:

In the first field, copy and paste the link of the icon you want to use to illustrate the title.

You need to upload the icon in advance to a folder on SharePoint Online, specifically in the Site contents of the intranet, where all users have access (see explanations below).

How to upload a picture to SharePoint?

Click on the settings icon at the top right of the page, and then on Site contents.

Select the folder where you want to upload your icon and upload the picture.

Select your image and click on the Info icon on the top right of the bar to access information on this image.

Scroll down the window and copy the image path by clicking on the Path icon .

Go back to the page with the Hover button web part and insert the path of the icon in the required field.

Below is an example of an icon added to a button:

Finally, you can write a title into the required field. The title is displayed to the right of the image, as you can see in the example below:

Back Button Settings

This section allows you to add additional information to your button, enabling users to explore further without having to navigate away from the page.

If you're not in edit mode already, click Edit at the top right of the page.
Select the Hover Button web part, then click Edit web part on the left side of the Hover Button web part.

Here, you have the option to input both the title and the text, initially hidden, which users can reveal by hovering their cursor over the button. See an example below:

It is not possible to customize the color of the title.

How to insert a hyperlink into a paragraph?

For further customization, an hyperlink can be added to the Back Button paragraph. This option will motivate the user to click and explore additional information.

Insert a title and write your text in the paragraph field.

In your text, choose where you want to insert the link (at the beginning, in the middle or at the end of the text) and copy and paste the following code:

<a href="https://www.google.it/" target="_blank" style="color:red; text-decoration:none">Clicca qui<a/>

Highlighted in yellow are the sections to be modified according to your preferences.

https://www.google.it/ = the the link you wish to insert in your text.
Red = the color you want to appear in your text. You can change the color by writing the appropriate color in English.
Clicca qui = Call To Action where the user will click to access the link. You can modify the CTA title as you wish.

Below is an example of custom text with a link using the following code: <a href="https://www.google.it/" target="_blank" style="color:red; text-decoration:none">Clicca qui<a/>

Colors Settings

This section lets you customize the different button colors. If you want more possibilities with respect to your graphic theme, you can modify the colors of the text and the background both in the front button and in the back button.

Do you want to customize colors?: this option allows you to choose and customize the colors of the front button. You can select the background and the text color by using the color picker or by entering a specific hex code.

See an example below with red background and black text:

Customize hover colors? : this option allows you to customize hover colors, that is to say the colors of the back button. You can select the background and the text color by using the color picker or by entering a specific hex code.

See an example below with green background and pink text:

When you are done, don't forget to publish your edits by clicking on Republish at the top right of the page.