--> Skip to main content

How to Create a Full CSS Tooltip Without Bootstrap


Blogmagz.com - Hi Web Developer! back again with the design teacher, this time the design teacher will share a tutorial on how to make a full css tooltip without bootstrapping. beforehand I will explain first what is a tooltip?

Understanding Tooltip

Tooltip is an information display that can be an image or text that appears when the pointer is hovered over a tooltip item. there are many ways to create a tooltip, there are also tooltips that provide complete information and some are brief depending on your needs.

How to Create a Full CSS Tooltip

Add CSS styles to the template code

Please add the styles below to your respective templates, the goal is that you don't need to rewrite the css styles when creating a tooltip in posts, just write the html.
  1. Select the theme menu
  2. Select edit HTML
  3. Look for the closing code head </style>or merge it with the existing css then copy and paste.

<style type='text/css'>
  /* CSS Tooltip by www.magelang1337.com */
  .tooltip {
    display:inline-block;
    position:relative;
}

.tooltip .top-info {
    min-width:200px; 
    top:-20px;
    left:50%;
    transform:translate(-50%, -100%);
    padding:0 10px;
    color:#444444;
    background-color:#4ee1f5;
    font-weight:normal;
    font-size:13px;
    border-radius:8px;
    position:absolute;
    z-index:9999;
    box-sizing:border-box;
    border:1px solid #4ee1f5;
    visibility:hidden; opacity:0; transition:opacity 0.8s;
}

.tooltip:hover .top-info {
    visibility:visible; opacity:1;
}

.tooltip .top-info i {
    position:absolute;
    top:100%;
    left:50%;
    margin-left:-12px;
    width:24px;
    height:12px;
    overflow:hidden;
}

.tooltip .top-info i::after {
    content:&#39;&#39;;
    position:absolute;
    width:12px;
    height:12px;
    left:50%;
    transform:translate(-50%,-50%) rotate(45deg);
    background-color:#4ee1f5;
    border:1px solid #4ee1f5;
}
</style>

Add the HTML tooltip code 

 Please copy and paste the following tooltip code in your post, you can customize the desired text information yourself.

 
</div> <div class="tooltip">Touch Me To See About Me
    <div class="top-info">
        <h3>Master Design</h3>
        <p>Blog programming tutorials, information on general science &technology, SEO, PHP, jQuery, CSS, HTML, JavaScript, Database, Widgets &web Tools.</p>
        <i></i>
    </div>
</div> 
If something is unclear, don't hesitate to ask in the comments column. So many tutorials on How to Make a Full CSS Tooltip Without Bootstrap, hope it's useful, thank you.
READ MORE
Newest Post
Comment Policy: Please write your comments that match the topic of this page post. Comments containing links will not be displayed before they are approved.
Comments
Close Comment