Customise Paid Post Topbar Tooltip

Features

Customise the content of the Paid Post Topbar

Tooltip component⁠

Change Tooltip label to an arbitrary string of text.

Change Tooltip content to an arbitrary HTML content, to allow for links and styling.

How to

1) Include the function

Copy and paste the JavaScript function to your project from

this gist.⁠

⁠

2) Initialise the function

Passing two variables:

label, the text string to be used as the new label for the tooltip.

content, the HTML string to be inserted into the tooltip.

const label = `Advertiser Perspective`;

const content = `This content was created in collaboration with T Brand, the content studio of New York Times Advertising. The news and editorial staff of The New York Times had no role in this post's creation.`;

customTooltip(label, content);

If you are in a SSR context, call the function only when the DOM is ready. For example, in Svelte:

import { onMount } from 'svelte';

onMount(() => {

customTooltip(label, content);

});

3) Add custom styles

As paid post functions are called only after the NYT furniture render, you might see a flash showing the default top bar label. To mitigate this, we might want to add this global style to the page:

.paid-post-tooltip:not(.is-custom) {

visibility: hidden;

}

On smaller screen the label might have to go on two lines. As the question mark icon position is relative to the label container, we might want to add this global style to the page to narrow the width of the label on smaller devices:

@media (max-width: 640px) {

.paid-post-tooltip button p {

width: min-content;

}

Tips

To debug, paste this in console before opening the tooltip.

// Pause script execution in 3 seconds

setTimeout(() => { debugger; }, 3000)

Features

How to

1) Include the function

2) Initialise the function

3) Add custom styles

Tips

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.