No-JS Tool tips

Developer
Chris Yaxley
Size
2,634 Kb
Views
8,096
  1. No-JS Tool tips Previews
  2. No-JS Tool tips HTML Codes
  3. No-JS Tool tips CSS Codes

How do I make an no-js tool tips?

A simple no-js implementation of some tool tips. The tool tips will show on hover of the "i" & tab focus of the relitive link. What is a no-js tool tips? How do you make a no-js tool tips? This script and codes were developed by Chris Yaxley on 07 January 2023, Saturday.

No-JS Tool tips Previews
IQ Test

No-JS Tool tips - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>No-JS Tool tips</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <article class="example-article"> <h1>September 2013 Chart</h1> <ol> <li> <a href="" title="">Ninetoes - Finder</a> <div class="tool-tip"> <i class="tool-tip__icon">i</i> <p class="tool-tip__info"> <span class="info"><span class="info__title">Label:</span> Kling Klong</span> <span><span class="info__title">Most popular month:</span> August 2013</span> </p> </div> </li> <li> <a href="" title="">Hot Natured feat. Anabel EnglundReverse - Skydiving</a> <div class="tool-tip"> <i class="tool-tip__icon">i</i> <p class="tool-tip__info"> <span class="info"><span class="info__title">Label:</span> Hot Creations</span> <span><span class="info__title">Most popular month:</span> August 2013</span> </p> </div> </li> <li> <a href="" title="">Full Intention - Icon</a> <div class="tool-tip"> <i class="tool-tip__icon">i</i> <p class="tool-tip__info"> <span class="info"><span class="info__title">Label:</span> Rebirth</span> <span><span class="info__title">Most popular month:</span> August 2013</span> </p> </div> </li> <li> <a href="" title="">Kenlou - The Bounce</a> <div class="tool-tip"> <i class="tool-tip__icon">i</i> <p class="tool-tip__info"> <span class="info"><span class="info__title">Label:</span> Strictly Rhythm</span> <span><span class="info__title">Most popular month:</span> March 2013</span> </p> </div> </li> <li> <a href="" title="">Plezier - Like</a> <div class="tool-tip"> <i class="tool-tip__icon">i</i> <p class="tool-tip__info"> <span class="info"><span class="info__title">Label:</span> Moda Black</span> <span><span class="info__title">Most popular month:</span> August 2013</span> </p> </div> </li> <li> <a href="" title="">Kruse &amp; Nuernberg - Off Course (Stefano Ritteri remix)</a> <div class="tool-tip"> <i class="tool-tip__icon">i</i> <p class="tool-tip__info"> <span class="info"><span class="info__title">Label:</span> Rebirth</span> <span><span class="info__title">Most popular month:</span> August 2013</span> </p> </div> </li> <li> <a href="" title="">Ghost Poet - Cold Win (Lorca Remix)</a> <div class="tool-tip"> <i class="tool-tip__icon">i</i> <p class="tool-tip__info"> <span class="info"><span class="info__title">Label:</span> Play It Again Sam</span> <span><span class="info__title">Most popular month:</span> November 2007</span> </p> </div> </li> <li> <a href="" title="">Nina Kraviz - Pain In The Ass (Lewis Boardman Greatest Pain In Tha Arse remix)</a> <div class="tool-tip"> <i class="tool-tip__icon">i</i> <p class="tool-tip__info"> <span class="info"><span class="info__title">Label:</span> Rekids</span> <span><span class="info__title">Most popular month:</span> March 2013</span> </p> </div> </li> <li> <a href="" title="">Brodinski - Gimme Back the Night (Club Mix)</a> <div class="tool-tip"> <i class="tool-tip__icon">i</i> <p class="tool-tip__info"> <span class="info"><span class="info__title">Label:</span> Bromance</span> <span><span class="info__title">Most popular month:</span> March 2013</span> </p> </div> </li> <li> <a href="" title="">Legitimate Scandal - Fu Gee La</a> <div class="tool-tip"> <i class="tool-tip__icon">i</i> <p class="tool-tip__info"> <span class="info"><span class="info__title">Label:</span> Guesthouse Music</span> <span><span class="info__title">Most popular month:</span> March 2013</span> </p> </div> </li> </ol> </article> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

No-JS Tool tips - Script Codes CSS Codes

/************** Tool Tip Styles ********************************/
.tool-tip { display: inline-block; position: relative; margin-left: 0.5em;
}
.tool-tip .tool-tip__icon { background: #27b1f0; border-radius: 10px; cursor: pointer; display: inline-block; font-style: italic; font-family: times new roman; height: 20px; line-height: 1.3em; text-align: center; width: 20px;
}
.tool-tip .tool-tip__info { display: none; background: #262626; border: 1px solid #27b1f0; border-radius: 3px; font-size: 0.875em; padding: 1em; position: absolute; left: 30px; top: -20px; width: 250px; z-index: 2;
}
.tool-tip .tool-tip__info:before, .tool-tip .tool-tip__info:after { content: ""; position: absolute; left: -10px; top: 7px; border-style: solid; border-width: 10px 10px 10px 0; border-color: transparent #27b1f0;
}
.tool-tip .tool-tip__info:after { left: -8px; border-right-color: #262626;
}
.tool-tip .tool-tip__info .info { display: block;
}
.tool-tip .tool-tip__info .info__title { color: #fa00f3;
}
.tool-tip:hover .tool-tip__info, .tool-tip:focus .tool-tip__info { display: inline-block;
}
a:focus + .tool-tip .tool-tip__info { display: inline-block;
}
/******* Styles just to make it look a little better *******/
body{ background-color: #262626; color:#ffffff; font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
}
article{ background: #414141; border-radius: 5px; padding: 1em; margin: 1em;
}
i{ font-style: normal;
}
a{ color: white; text-decoration: none;
}
a:hover,
a:focus{ text-decoration: underline;
}
li{ margin: 5px 0;
}
No-JS Tool tips - Script Codes
No-JS Tool tips - Script Codes
Home Page Home
Developer Chris Yaxley
Username chrisyaxley
Uploaded January 07, 2023
Rating 4
Size 2,634 Kb
Views 8,096
Do you need developer help for No-JS Tool tips?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Chris Yaxley (chrisyaxley) Script Codes
Name
Social Share Sprite using SASS Each
No-JS Off Canvas Navigation
A Pen by Chris Yaxley
Google style image preview
3D Transforms CSS Carousel
Quick PostCodes.io test
Basic Mario Keyframes animation
Accessible custom CSS only Radio buttons
SVG Logo with CSS animations
Some modern CSS techniques
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!