CSS: tooltips and its position with arrow

11 April 2020, 8:19 pm by antelove



Happy Coding


index.html

/* ------------------------------------------------------------ */
/*  CSS: Tooltips and its position with arrow                   */
/*                                                              */
/*  Author: antelove                                            */
/*  Website: antelove.com                                       */
/* ------------------------------------------------------------ */

<!DOCTYPE html>
<html>

    <head>

        <title>CSS tooltip and its position with arrow</title>

        <style>

        /* --- Tooltip || Begin --- */
        .tooltip {
            position: relative;
            display: inline-block;
            border-bottom: 1px dotted black;
        }

        .tooltip .tooltipText {
            visibility: hidden;
            max-width: 300px;
            background-color: black;
            color: #fff;
            text-align: center;
            border-radius: 5px;
            padding: 0.5em;

            position: absolute;
            z-index: 1;

            word-wrap: break-word;
        }

        .tooltip:hover .tooltipText {
            visibility: visible;
        }

        .tooltipTextTop {
            bottom: 150%;

            left: 50%;
            transform: translate(-50%, 0px);
            -ms-transform: translate(-50%, 0px); /* IE 9 */
            -webkit-transform: translate(-50%, 0px); /* Chrome, Safari, Opera */
        }

        .tooltipTextLeft {
            right: 150%;

            top: 50%;
            transform: translate(0px, -50%);
            -ms-transform: translate(0px, -50%); /* IE 9 */
            -webkit-transform: translate(0px, -50%); /* Chrome, Safari, Opera */
        }

        .tooltipTextRight {
            left: 150%;

            top: 50%;
            transform: translate(0px, -50%);
            -ms-transform: translate(0px, -50%); /* IE 9 */
            -webkit-transform: translate(0px, -50%); /* Chrome, Safari, Opera */
        }

        .tooltipTextBottom {
            top: 150%;

            left: 50%;
            transform: translate(-50%, 0px);
            -ms-transform: translate(-50%, 0px); /* IE 9 */
            -webkit-transform: translate(-50%, 0px); /* Chrome, Safari, Opera */
        }
        /* --- Tooltip || End --- */

        /* --- Tooltip Arrow || Begin --- */
        .tooltip .tooltipArrow::after {
            border-width: 5px;
            border-style: solid;

            content: "";
            position: absolute;
        }

        .tooltipArrowTop::after {
            border-color: black transparent transparent transparent; /* top */

            top: 100%;
            left: 50%;
            margin-left: -5px;
        }

        .tooltipArrowLeft::after {
            border-color: transparent transparent transparent black; /* left */

            top: 50%;
            left: 100%;
            margin-top: -5px;
        }

        .tooltipArrowRight::after {
            border-color: transparent black transparent transparent; /* right */

            top: 50%;
            right: 100%;
            margin-top: -5px;
        }

        .tooltipArrowBottom::after {
            border-color: transparent transparent black transparent; /* bottom */

            bottom: 100%;
            left: 50%;
            margin-left: -5px;
        }
        /* --- Tooltip Arrow || End --- */

        /* --- Center Div in Body || Begin --- */
        div {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%); /* IE 9 */
            -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */
        }
        /* --- Center Div in Body || End --- */

        </style>

    </head>

    <body>

        <div>

            <div class="tooltip">Top <span class="tooltipText tooltipTextTop tooltipArrow tooltipArrowTop">TOP more ... more ... and moooooore</span></div><br />
            <div class="tooltip">Left <span class="tooltipText tooltipTextLeft tooltipArrow tooltipArrowLeft">LEFT</span></div><br /><div class="tooltip">Right <span class="tooltipText tooltipTextRight tooltipArrow tooltipArrowRight">RIGHT</span></div><br />
            <div class="tooltip">Bottom <span class="tooltipText tooltipTextBottom tooltipArrow tooltipArrowBottom">BOTTOM</span></div><br />

        </div>

    </body>

</html>

Thank for reading :)


Keywords:


No Action Title
1 codepen: full page
2 codepen: debug mode
0 comment