Home/Explore/

Tooltip

CSS Layout - Most popular layouts and patterns that can be built with CSS | Product Hunt Embed
Move the mouser over the main element to see the tooltip.
<style>
.p-tooltip {
    /* Used to position the arrow */
    position: relative;
}

/* Show the arrow and content when hovering the trigger element */
.p-tooltip:hover .p-tooltip-arrow,
.p-tooltip:hover .p-tooltip-content {
    opacity: 1;
}

.p-tooltip-arrow {
    /* Invisible by default */
    opacity: 0;

    /* Border */
    border: 8px solid transparent;
    border-top-color: #00439e;

    /* Position */
    bottom: 100%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, 8px);

    /* Zero size */
    height: 0;
    width: 0;

    /* Displayed on top of other element */
    z-index: 10;
}

.p-tooltip-content {
    /* Invisible by default */
    opacity: 0;

    /* Background color, must be the same as the border color of arrow */
    background-color: #00439e;
    border-radius: 2px;

    /* Position */
    bottom: 100%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -8px);

    /* Displayed on top of other element */
    z-index: 10;
}
</style>

<div class="p-tooltip">
    <!-- The tooltip content -->
    <div class="p-tooltip-content">
        ...
    </div>

    <!-- The tooltip arrow -->
    <div class="p-tooltip-arrow" />

    <!-- The trigger element -->
    ...
</div>

Related patterns

Popover arrow

Subscribe to the newsletter for the latest layouts or patterns. No spam. Ever!