Simple Tooltip

Discover the simplicity of Tooltip implementation using HTML and Pure CSS, perfect for adding informative tooltips to your website without JavaScript dependencies.

Explore the versatility of Tooltip implementation using only HTML and Pure CSS, providing a lightweight and efficient solution for adding tooltip functionality to your website. Tooltips offer a convenient way to provide additional information or context to users when hovering over specific elements, improving user experience and usability.

With HTML and Pure CSS, you can create customized tooltip effects without relying on JavaScript dependencies, resulting in faster loading times and improved performance. Tailor the appearance, position, and behavior of your tooltips using CSS styles and attributes, allowing for seamless integration with your website's design language.

Implementing tooltips with HTML and Pure CSS is straightforward, making it accessible to developers of all skill levels. Simply define the tooltip content within HTML elements and apply CSS styles to create the desired tooltip appearance and behavior. With minimal code and dependencies, you can easily customize tooltips to suit your website's needs and enhance user interaction.

Enhance user experience and usability on your website by incorporating informative and visually appealing tooltips using HTML and Pure CSS. Provide users with valuable information and context at their fingertips, improving navigation and interaction with your website's content.

Steps to Copy the Code

Creating a customized Tooltip with HTML and CSS is straightforward with our comprehensive guide. Follow these steps to copy the code and personalize it to match your website's design:

  1. Copy the Code: Start by copying the HTML and CSS code for the Tooltip component from the above code snippet.
  2. Paste into Your Project: Copy the HTML code from the "HTML" tab of the above code snippet and paste it into your HTML files at the desired location where you want the Tooltip to appear on your website.
    • Next, copy the CSS code from the "CSS" tab of the above code snippet and paste it into your CSS files. Ensure that you link the CSS file containing the Tooltip styles to your HTML files using the <link> tag within the <head> section. For example:
    • <head>
    <link rel="stylesheet" href="tooltip-styles.css">
</head>
  3. Customize as Needed: HTML and CSS provide flexibility for customizing the appearance and behavior of your Tooltip. Modify the code to match your design preferences, such as adjusting colors, sizes, and styles for the tooltip content and tooltip trigger element.
  4. Test and Refine: After making modifications, thoroughly test the Tooltip in various browsers and screen sizes to ensure it displays correctly and functions as expected. Make any necessary adjustments to refine its appearance and behavior.

By following these steps, you'll be able to effectively customize a Tooltip component using HTML and CSS, allowing you to create a seamless and informative user experience for your website visitors.

Code Explanation

HTML Code

<div class="container">

This is a div element with the class container. It's likely a custom class defined in your CSS, as it's not a standard class provided by HTML or popular CSS frameworks like Bootstrap or Tailwind CSS. This class may be used to control the layout or styling of its contents.

<p>
  <a href="#" data-tooltip="I am a tooltip!">I have a tooltip.</a>
</p>

Inside the container div, there's a p (paragraph) element containing an a (anchor) element.

  • <p>: This is a paragraph element, used to group text content.
  • <a href="#">: This is an anchor element, commonly used to create hyperlinks. The href="#" attribute specifies that the link doesn't lead anywhere (# is often used as a placeholder for URLs).
  • data-tooltip="I am a tooltip!": This is a custom data attribute (data-tooltip) added to the anchor element. Custom data attributes allow developers to store extra information in HTML elements. In this case, it's likely used to trigger a tooltip when the user hovers over the link.
  • I have a tooltip.: This is the text content of the anchor element. It will be displayed as clickable text in the browser.

CSS Code

body {
    margin: 64px auto;
    text-align: center;
    font-size: 100%;
    max-width: 640px;
    width: 94%;
}
  • margin: 64px auto;: Sets the top and bottom margin of the body to 64 pixels and horizontally centers the body within its container.
  • text-align: center;: Aligns the text content of the body to the center.
  • font-size: 100%;: Sets the font size of the body to 100% of its parent element's font size.
  • max-width: 640px;: Sets the maximum width of the body to 640 pixels.
  • width: 94%;: Sets the width of the body to 94% of its containing block's width.
a:hover {
    text-decoration: none;
}
  • text-decoration: none;: Removes the underline effect from anchor elements when hovered over.
[data-tooltip] {
    position: relative;
    z-index: 2;
    cursor: pointer;
}
  • [data-tooltip]: Selects elements with a data-tooltip attribute.
  • position: relative;: Sets the positioning context for the tooltip content to its containing element.
  • z-index: 2;: Sets the stacking order of the tooltip content to 2, ensuring it's above other content.
  • cursor: pointer;: Changes the cursor to a pointer when hovering over elements with a data-tooltip attribute.
[data-tooltip]:before,
[data-tooltip]:after {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}
  • [data-tooltip]:before, [data-tooltip]:after: Selects pseudo-elements before and after of elements with a data-tooltip attribute.
  • visibility: hidden; opacity: 0; pointer-events: none;: Hides the tooltip (before and after pseudo-elements) by default and disables pointer events.
[data-tooltip]:before {
    position: absolute;
    bottom: 150%;
    left: 50%;
    margin-bottom: 5px;
    margin-left: -80px;
    padding: 7px;
    width: 160px;
    border-radius: 3px;
    background-color: hsla(0, 0%, 20%, 0.9);
    color: #fff;
    content: attr(data-tooltip);
    text-align: center;
    font-size: 14px;
    line-height: 1.2;
}

Styles the tooltip content displayed before the element with the data-tooltip attribute:

  • Sets its position to absolute, making it positioned relative to its closest positioned ancestor.
  • Positions it 150% above the element's bottom edge and horizontally centered.
  • Applies padding, width, border radius, background color, text color, content (using attr(data-tooltip) to retrieve the value of the data-tooltip attribute), text alignment, font size, and line height.
[data-tooltip]:after {
    position: absolute;
    bottom: 150%;
    left: 50%;
    margin-left: -5px;
    width: 0;
    border-top: 5px solid hsla(0, 0%, 20%, 0.9);
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    content: " ";
    font-size: 0;
    line-height: 0;
}

Styles the tooltip arrow displayed after the element with the data-tooltip attribute:

  • Sets its position to absolute, similar to the tooltip content.
  • Positions it 150% above the element's bottom edge and horizontally centered.
  • Defines its shape using border properties to create a triangular shape resembling an arrow.
  • Uses transparent borders on the right and left sides to create a triangle shape.
  • Sets its content to an empty string to ensure it's rendered.
  • Sets font size and line height to 0 to hide any content.
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
    visibility: visible;
    opacity: 1;
}
  • Changes the visibility and opacity of the tooltip content (before and after pseudo-elements) to visible and fully opaque when hovering over elements with the data-tooltip attribute. This makes the tooltip visible and triggers a smooth fade-in animation effect.