Function Overloads in Typescript allow us to define multiple function signatures for the same function. Each signature specifies a particular set of parameter types and the corresponding return type. This feature enables TypeScript to perform accurate type checking and inference, ensuring the function behaves correctly with different argument combinations.

TLDR, Show me the code: TS Playground for example

How to Use Function Overloads

We define multiple function signatures to use function overloads above the actual function implementation. Each signature is specific to a set of arguments and the expected return type. The function implementation follows these signatures and handles different cases accordingly.

// Function signature for adding numbers and returning a number
function add(a: number, b: number): number;

// Function signature for concatenating strings and returning a string
function add(a: string, b: string): string;

// Function implementation that handles both cases
function add(a: any, b: any): any {
  return a + b;
}

Let's consider one more example.

function convertToUnit(value: number, convertToString?: boolean) {
  if (convertToString) return value.toString();
  return value;
}

In the above function, convertToUnit returns a union type of string | number, which loses the intellisense and other TS benefits. To overcome this, we can add the function signature for the functions based on convertToString the parameter value.

// Will return string if convertToString is true
function convertToUnit(value: number, convertToString: true): string;

// will return number if convertToString is false
function convertToUnit(value: number): number;

function convertToUnit(value: number, covertToString?: boolean) {
  if (covertToString) return value.toString();
  return value;
}

The convertedStringValue would have all the intellisense for strings and convertedNumValue all the intellisense for numbers.

TS Playground

But when it comes to adding tooltips to the website, developers generally use a library for this, which is definitely good as it gives a lot of customizations and controls. But in a situation when tooltips are required but not on a large scale instead, in certain places on the page, then it kinda feels useless to carry around such big libraries for this.

Required Knowledge:-

• General working knowledge of HTML and CSS
• How data attribute works in HTML and CSS. For reference check this CSS-tricks article
• Understanding of pseudo-selectors in CSS

There are several ways to create a tooltip in CSS. In this, we'll be using pseudo-selectors of CSS. One benefit of using this method is that there's no need to create an actual element in the HTML.
First of all on whichever element you want to show the tooltip, add a data attribute data-customTooltip="Tooltip text". Also, pass the text you wanna show on the tooltip.

index.html

<span data-customTooltip="Tooltip text">
  Hover on me to see tooltip
</span>

That's it, this is all we need in HTML. Now, let's add CSS to it. Here we'll be styling the tooltip using data attribute selector. Read here more about it.

styles.css

[data-customTooltip]{
    cursor: pointer;
    position: relative;
}

[data-customTooltip]::after {
    background-color: #fff;
    color: #222;
    font-size:14px;
    padding: 8px 12px;
    height: fit-content;
    width: fit-content;
    border-radius: 6px;
    position: absolute;
    text-align: center;
    bottom: 0px;
    left: 50%;
    content: attr(data-customTooltip);
    transform: translate(-50%, 110%) scale(0);
    transform-origin: top;
    transition: 0.14s;
    box-shadow: 0 4px 14px 0 rgba(0,0,0,.2), 0 0 0 1px rgba(0,0,0,.05);
  }

Here, we're selecting the elements which have data-customTooltip attribute on them and creating a pseudo-element using :after. Till now a pseudo-element for the tooltip is created but it's not visible as there is scale(0) in the style.

Now change the scale to 1 on hover on the parent element.

style.css

  [data-customTooltip]:hover:after {
    display: block;
    transform: translate(-50%, 110%) scale(1);
  }

And here is our tooltip....
Position can be changed according to requirement by giving suitable top, left, bottom, and right values along with translate property.
I'll be writing another blog where we'll make the position of the tooltip dynamic and also incorporate light and dark themes.

Now just pass data-customTooltip="tooltip text" attribute wherever you want to add a tooltip.

Codepen demo

PS:- This is my first blog, if there's any mistake I'm making or there's any scope of improvement, please feel free to comment.😀