• Skip to main content
  • Skip to primary sidebar

Technical Notes Of
Ehi Kioya

Technical Notes Of Ehi Kioya

  • Forums
  • About
  • Contact
MENUMENU
  • Blog Home
  • AWS, Azure, Cloud
  • Backend (Server-Side)
  • Frontend (Client-Side)
  • SharePoint
  • Tools & Resources
    • CM/IN Ruler
    • URL Decoder
    • Text Hasher
    • Word Count
    • IP Lookup
  • Linux & Servers
  • Zero Code Tech
  • WordPress
  • Musings
  • More
    Categories
    • Cloud
    • Server-Side
    • Front-End
    • SharePoint
    • Tools
    • Linux
    • Zero Code
    • WordPress
    • Musings

How To Create Tooltips Using CSS3

Tagged: CSS, CSS3

  • This topic has 0 replies, 1 voice, and was last updated 1 year, 2 months ago by Chinomnso.
Viewing 1 post (of 1 total)
  • Author
    Posts
  • November 29, 2019 at 9:21 am #81302
    Participant
    @chinomnso

    Tooltips are helpful when you want to explain to your users how to use features of your website. They can be added to form fields or other elements on a web page. This article explains how to implement tooltips using CSS3. Let’s dive right in and start writing code.

    1
    2
    3
    <div class = "mytooltip">
       Here's an example of a tooltip. You can put anything you want here, even images.
    </div>

    The code above is the markup for what we are doing. The text in the <p> . . .</p> tag will be rendered as the text in the tooltip, but it will be hidden until a user places their mouse over the tooltip div with the “mytooltip” class. Interestingly, anything can be placed within the paragraph tag including images. Here’s the CSS for the markup above.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    <style type="text/css">
    .mytooltip{
        cursor: default;
        position: absolute;
        top: 20px;
        right: 18px;
        background-color: #BCDBEA;
        border-radius: 50%;
        font-size: 20px;
        width: 24px;
        height: 24px;
        line-height: 26px;
        text-align: center;
    }
     
    .mytooltip-h{
        position: absolute;
        top: 18px;
        right: 18px;
        text-align: center;
        background-color: #BCDBEA;
        border-radius: 20%;
        width: 30px;
        height: 24px;
        font-size: 14px;
        line-height: 26px;
        cursor: default;
    }
     
    .mytooltip:before{
        color:#fff;
        content:'?';
        font-weight: bold;
    }
    .mytooltip-h:before{
     
        color:#fff;
        content:'help';
        font-weight: bold;
    }
     
    .mytooltip:hover p, .tooltip-h:hover p{
        display:block;
        transform-origin: 100% 0%;
     
        -webkit-animation: fadeIn 0.4s ease-in-out;
        animation: fadeIn 0.4s ease-in-out;
     
    }
     
    .mytooltip p, .tooltip-h p{    
        display: none;
        text-align: left;
        background-color: #1E2021;
        padding: 20px;
        width: 350px;
        position: absolute;
        border-radius: 3px;
        box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
        right: -4px;
        color: #FFF;
        font-size: 13px;
        line-height: 1.4;
    }
     
    .mytooltip p:before, .tooltip-h p:before{
        position: absolute;
        content: '';
        width:0;
        height: 0;
        border:5px solid transparent;
        top:-12%
        border-bottom-color:#1E2021;
        right:10px;
    }
     
    .mytooltip p:after, tooltip-h p:after{
        height:50px;
        content:'';
        position: absolute;
        top:-50px;
        left:0;
        width:100px;
    }
     
     
     
    #content {
        background-color: #428bca;
        border-radius: 5px;
        margin: 0 auto;
        max-width: 600px;
        position: relative;
        margin: 0 auto 100px;
    }
     
    </style>

    Simply copying the code blocs and pasting them would get your tooltips up and running. You can tweak it to your taste, changing the colors, animation speed, or whatever you want.
    Notice the line where we have content:?. The question mark there is the text over which the users will hover to reveal the tooltip. You can change it to anything you wish.
    If you want to add an animation to the tooltip, it is possible. The following block of code adds fade-in and fade-out effects to the tooltip display. You can copy it and paste it to your code.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    @-webkit-keyframes fadeIn {
        0% {
            opacity:0;
            transform: scale(0.9);
        }
     
        100% {
            opacity:100%;
            transform: scale(1);
        }
    }
     
    @keyframes fadeIn {
        0% { opacity:0; }
        100% { opacity:100%; }
    }
  • Author
    Posts
Viewing 1 post (of 1 total)
  • You must be logged in to reply to this topic.
Log In

Primary Sidebar

FORUM   MEMBERSHIP

Log In
Register Lost Password

POPULAR   FORUM   TOPICS

  • How to find the title of a song without knowing the lyrics
  • The Art of Exploratory Data Analysis (Part 1)
  • Welcome Message
  • How To Change Or Remove The WordPress Login Error Message
  • Getting Started with SQL: A Beginners Guide to Databases
  • Replacing The Default SQLite Database With PostgreSQL In Django
  • How to Implement Local SEO On Your Business Website And Drive Traffic
  • Forums
  • About
  • Contact

© 2021   ·   Ehi Kioya   ·   All Rights Reserved
Privacy Policy