We Keep Coding

JS Function Not Defined Chrome Extension Popup.js

I am trying to add this button On Codepen to my chrome extension, my HTML and CSS work perfectly fine. The JS is popup.js and is on the same level as the rest of the code, but it doesn't seem to be linked to the popup.html. Manifest is in the image . I did convert the SCSS to CSS using an online converter. I need help linking the js to popup.html so the button works as it does in Codepen.
Html, CSS & JS:
$('button.cooldown').click(function(){
var btn = $(this);
btn.prop('disabled', true);
setTimeout(function(){
btn.prop('disabled', false);
},15000);
});
body {
background-image: linear-gradient( 72.5deg, rgba(0,175,255,1) 27.9%, rgba(0,224,254,1) 84.2% );
width: 250px;
height: 400px;
}
#header {
padding-top: 2px;
padding-bottom: 2px;
text-align: center;
background-color: #393e46;
color: white;
font-size: 15px;
border-radius: 10px;
}
.button {
background-color: rgb(80, 220, 100);
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
border-radius: 50px;
margin: 5px;
}
.button:hover {
background-color: #393e46;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
border-radius: 50px;
margin: 5px;
}
.button_cancel {
background-color: #f44444;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
border-radius: 50px;
margin: 5px;
}
.button_cancel:hover {
background-color: #393e46;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
border-radius: 50px;
margin: 5px;
}
/* The container */
.container {
display: block;
position: relative;
padding-left: 10px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default checkbox */
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
font-size: 18px;
}
/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
}
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
background-color: #ccc;
}
/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
background-color: #2196F3;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
display: block;
}
/* Style the checkmark/indicator */
.container .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=file], select {
padding-left: 15%;
}
.form-item {
padding-top: 2px;
padding-bottom: 2px;
text-align: center;
}
.wallpaper-title {
display: block;
padding-bottom: 3px;
font-size: 11px;
}
button.cooldown {
background: #336699;
min-height: 48px;
min-width: 144px;
position: relative;
margin: 5px;
border-radius: 5px;
border: 0;
color: #fff;
padding: 0 15px;
font-size: 16px;
outline: none;
overflow: hidden;
cursor: pointer;
}
button.cooldown:active, button.cooldown:focus {
outline: none;
}
button.cooldown:disabled {
background: #264d73;
color: #d9d9d9;
cursor: default;
box-shadow: inset 3px 3px 10px 0px rgba(0, 0, 0, 0.2);
}
button.cooldown:disabled:after {
content: '';
position: absolute;
bottom: 0;
width: 100%;
left: 0;
height: 5px;
background: #1a334d;
animation: cooldown 15s linear;
}
#keyframes cooldown {
0% {
width: 100%;
}
100% {
width: 0;
}
}
/* layout stuff */
section {
text-align: center;
margin-top: 100px;
color: #333;
}
p {
font-size: 12px;
}
<!doctype html>
<html>
<head>
<title>Home+</title>
<link rel="stylesheet" type="text/css" href="popup.css">
<script src="popup.js"></script>
<div id="header">
<h2>Home+</h2>
<h6>Settings</h6>
</div>
</head>
<body>
<!-- The settings pane, expand at will -->
<div class="tab-pane" id="settings">
<form class="settings">
<div class="form-item">
<label for="zip">Zip Code: </label>
<div class="form-item">
<input id="zip" name="zip" type="text" pattern="[0-9]*">
</div>
</div>
<div class="form-item">
<label class="container">Show Weather
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
</div>
<div class="form-item">
<button class="cooldown">Refresh Weather</button>
</div>
<div class="form-item">
<label for="hompagebg" class="wallpaper-title">Upload Wallpaper</label>
<center>
<input type="file" id="hompage-background" name="hompagebg" accept="image/png, image/jpeg" size="20">
</center>
</div>
<div class="form-item">
<button type="button" class="button">Save</button>
<button type="button" class="button_cancel">Cancel</button>
</div>
</form>
</div>
</div>
</body>
</html>

I needed to download jquery and link it to popup.html using and my JS code needed to be placed inside
$(document).ready(function () {
//code goes here
});

Custom tooltip CSS issue with the header

I've created a tooltip using CSS but what I can't achieve is keeping the tooltip head into center. So if you notice it says £30.00 in the tooltip. If you write £300.00 or increase words in the tooltip the head of the tooltips doesn't stay in the center.
Can anyone help?
.tooltip-card {
display: inline-block;
position: relative;
border: 1px solid #777777;
background: #FFF;
text-decoration: none;
border-radius: 2px;
padding: 5px 10px;
margin-top: 50px;
margin-bottom: 40px;
}
.tooltip-card-text:before {
content: '';
display: block;
position: absolute;
left: 31%;
bottom: 100%;
width: 0;
height: 0;
border: 10px solid transparent;
border-bottom-color: black;
}
.tooltip-card-text:after {
content: '';
display: block;
position: absolute;
left: 32%;
bottom: 100%;
width: 0;
height: 0;
border: 9px solid transparent;
border-bottom-color: white;
}
.search-bolt-icon-map {
color: #02b875;
margin-right: 5px;
}
<div class="tooltip-card">
<div href="#" class="tooltip-card-text"><i class="fa fa-bolt search-bolt-icon-map"></i>£30.00</div>
</div>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css">

The problem is that 31% and 32% are specific, and rely on the current width of the element. Instead, center the triangle with left: 50; transform: translateX(-50%);:
.tooltip-card {
display: inline-block;
position: relative;
border: 1px solid #777777;
background: #FFF;
text-decoration: none;
border-radius: 2px;
padding: 5px 10px;
margin-top: 50px;
margin-bottom: 40px;
}
.tooltip-card-text:before {
content: '';
display: block;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 100%;
width: 0;
height: 0;
border: 10px solid transparent;
border-bottom-color: black;
}
.tooltip-card-text:after {
content: '';
display: block;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 100%;
width: 0;
height: 0;
border: 9px solid transparent;
border-bottom-color: white;
}
.search-bolt-icon-map {
color: #02b875;
margin-right: 5px;
}
<div class="tooltip-card">
<div href="#" class="tooltip-card-text">
<i class="fa fa-bolt search-bolt-icon-map"></i> £30000000.00
</div>
</div>
<div class="tooltip-card">
<div href="#" class="tooltip-card-text">
<i class="fa fa-bolt search-bolt-icon-map"></i> £3000.00
</div>
</div>
<div class="tooltip-card">
<div href="#" class="tooltip-card-text">
<i class="fa fa-bolt search-bolt-icon-map"></i> £30.00
</div>
</div>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css">

Change the content(icon) of a div when clicked

I created a list with divs inside and the one div contains a home icon using font awesome. I want the font icon to change to a picture icon when clicked and change back to the home icon when clicked again. Do I need Javascript for this?
ul{
list-style-type: none;
margin-top: 0;
}
li a{
text-decoration: none;
color: black;
font-size: 25px;
}
li{
width: 50px;
height: 50px;
display: inline-block;
}
#homecover{
width: 55px;
height: 55px;
margin-top: 150px;
left: 47.5%;
position: absolute;
}
#home{
position: absolute;
z-index: 2;
background-color: #F73933;
border-radius: 50%;
border: 2px solid #F73933 ;
box-shadow: 2px 2px 2px 0.1px #9D9494, 0px 0px 0px 1px white inset;
}
#home a{
padding-left: 0.5em;
position: absolute;
padding-top: 0.3em;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul>
<div id="homecover">
<li id="home">
<span class="fa fa-home"></span>
<li>
</div>
</ul>

You can use JavaScript, jQuery is recommended:
$('#home a').on('click', function(e){
$('#home span').toggleClass('fa-home fa-anchor');
};
I guess you know how to include jQuery, if not just paste this into your head section:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Let me know if that works or not!

You need to add jQuery for that:
$("#home a").click(function(){
$(this).parent().toggleClass("active");
})
ul{
list-style-type: none;
margin-top: 0;
}
li a{
text-decoration: none;
color: black;
font-size: 25px;
}
li{
width: 50px;
height: 50px;
display: inline-block;
}
#homecover{
width: 55px;
height: 55px;
margin-top: 150px;
left: 47.5%;
position: absolute;
}
#home{
position: absolute;
z-index: 2;
background-color: #F73933;
border-radius: 50%;
border: 2px solid #F73933 ;
box-shadow: 2px 2px 2px 0.1px #9D9494, 0px 0px 0px 1px white inset;
}
#home a{
padding-left: 0.5em;
position: absolute;
padding-top: 0.3em;
}
#home.active .fa-home:before{
content: "\f1b9";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul>
<div id="homecover">
<li id="home">
<span class="fa fa-home"></span>
<li>
</div>
</ul>

You have to use Javascript to bind the click event, after you should toggle CSS class.
Try this solution without jQuery
let home = document.querySelector('#home');
home.addEventListener('click', (e) => {
let icon = document.querySelector('.fa');
icon.classList.toggle('fa-home');
icon.classList.toggle('fa-heart');
})
ul{
list-style-type: none;
margin-top: 0;
}
li a{
text-decoration: none;
color: black;
font-size: 25px;
}
li{
width: 50px;
height: 50px;
display: inline-block;
}
#homecover{
width: 55px;
height: 55px;
margin-top: 150px;
left: 47.5%;
position: absolute;
}
#home{
position: absolute;
z-index: 2;
background-color: #F73933;
border-radius: 50%;
border: 2px solid #F73933 ;
box-shadow: 2px 2px 2px 0.1px #9D9494, 0px 0px 0px 1px white inset;
}
#home a{
padding-left: 0.5em;
position: absolute;
padding-top: 0.3em;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul>
<div id="homecover">
<li id="home">
<span class="fa fa-home"></span>
<li>
</div>
</ul>

When user driven events are involved, you'll have to use javascript. One way to do it is, you have two classes and you toggle them to show different icons.
var link = document.querySelector('#home a');
link.addEventListener('click', function(e){
//Prevent default action of a link, which navigates to href prop
e.preventDefault();
var icon = this.querySelector('span');
icon.classList.toggle('fa-home');
icon.classList.toggle('fa-image');
});
ul{
list-style-type: none;
margin-top: 0;
}
li a{
text-decoration: none;
color: #fff;
font-size: 25px;
}
li{
width: 50px;
height: 50px;
display: inline-block;
}
#homecover{
width: 55px;
height: 55px;
margin-top: 50px;
left: 47.5%;
position: absolute;
}
#home{
position: absolute;
z-index: 2;
background-color: #F73933;
border-radius: 50%;
border: 2px solid #F73933 ;
box-shadow: 2px 2px 2px 0.1px #9D9494, 0px 0px 0px 1px white inset;
}
#home a{
padding-left: 0.5em;
position: absolute;
padding-top: 0.3em;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul>
<div id="homecover">
<li id="home">
<span class="fa fa-home"></span>
<li>
</div>
</ul>

This is a non js solution
input + span:before {
height:45px;
content:"\f015"
}
input:checked + span:before {
content:"\f03e"
}
input{
display:none;
}
span.icon{
display: block;
vertical-align: middle;
text-align:center;
line-height: 45px;
}
ul{
list-style-type: none;
margin-top: 0;
}
li a{
text-decoration: none;
color: black;
font-size: 25px;
}
li{
width: 50px;
height: 50px;
display: inline-block;
}
#homecover{
cursor:pointer;
width: 55px;
height: 55px;
margin-top: 150px;
left: 47.5%;
position: absolute;
}
#home{
position: absolute;
z-index: 2;
background-color: #F73933;
border-radius: 50%;
border: 2px solid #F73933 ;
box-shadow: 2px 2px 2px 0.1px #9D9494, 0px 0px 0px 1px white inset;
}
#home a{
padding-left: 0.5em;
position: absolute;
padding-top: 0.3em;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul>
<label class="switch">
<div id="homecover">
<li id="home">
<input type="checkbox" ><span class="icon fa fa-lg"></span>
<li>
</div>
</label>
</ul>

$("span.fa").click(function(){
if($(this).attr("class") === "fa fa-home"){
$(this).attr("class", "fa-fa-{any-pic}");
} else {
$(this).attr("class", "fa fa-home");
}
});

Hide custom dropdown menu li once input checked

I have a custom dropdown menu in pure html . i have tried everything to get it to close but nothing works. I just want it to close once something was selected / somewhere outside the menu is clicked. it appears as my custom css is preventing any simple solution.
here is the code i have for it and css and current js. i understand that this may be a frequently asked question but im still a novice at javascript and even though i feel as if i've implemented all the solutions i could, its possible i havent done so correctly. thank you
$('#dropdown li').click(function() {
$(".dd-button:first-child").text($(this).text());
});
.dropdown {
display: inline-block;
position: relative;
}
.wrapper {
text-align: center;
align-items: center;
align-content: center;
margin-left: -25%;
}
.dd-button {
display: inline-block;
border: 1px solid gray;
border-radius: 4px;
padding: 10px 30px 10px 20px;
background-color: #ffffff;
cursor: pointer;
white-space: nowrap;
width: 375px;
}
.dd-button:after {
content: '';
position: absolute;
top: 50%;
left: 90%;
transform: translateY(-50%);
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid black;
}
.dd-button:hover {
background-color: #eeeeee;
}
.dd-input {
display: none;
}
.dd-menu {
position: relative;
top: 100%;
border: 1px solid #ccc;
border-radius: 4px;
padding: 0;
margin: 2px 0 0 0;
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
background-color: #ffffff;
list-style-type: none;
width: 375px;
}
.dd-input+.dd-menu {
display: none;
}
.dd-input:checked+.dd-menu {
display: block;
}
.dd-menu li {
padding: 10px 20px;
cursor: pointer;
white-space: nowrap;
}
.dd-menu li:hover {
background-color: #f6f6f6;
}
.dd-menu li a {
display: block;
margin: -10px -20px;
padding: 10px 20px;
}
.dd-menu li.divider {
padding: 0;
border-bottom: 1px solid #cccccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div id="result"></div>
<label class="dropdown" name="dropdown">
<div class="dd-button"> Selection</div>
<input type="checkbox" class="dd-input center-block" id="test">
<ul id = "dropdown" class="dd-menu">
<li>plan1 </li>
<li>plan2 </li>
<li>plan3 </li>
<li>Plan4 </li>
</ul>
</label>
</div>

Add this to your Javascript.
Include id to you <h1>
$('#dropdown li').click(function() {
$('#result').replaceWith('<h1 id="result">' + $(this).text() + '</h1>');
});
$(document).ready(function() {
// Show hide popover
$(".dropdown").click(function() {
$(this).find("#dropdown").slideDown("fast");
});
});
$(document).on("click", function(event) {
var $trigger = $(".dropdown");
if ($trigger !== event.target && !$trigger.has(event.target).length) {
$("#dropdown").slideUp("fast");
}
});
And you can even hide the dropdown by $('.dropdown').hide();
$('#dropdown li').click(function() {
$('#result').replaceWith('<h1 id="result">' + $(this).text() + '</h1>');
});
$(document).ready(function() {
// Show hide popover
$(".dropdown").click(function() {
$(this).find("#dropdown").slideDown("fast");
});
});
$(document).on("click", function(event) {
var $trigger = $(".dropdown");
if ($trigger !== event.target && !$trigger.has(event.target).length) {
$("#dropdown").slideUp("fast");
}
});
.dropdown {
display: inline-block;
position: relative;
}
.wrapper {
text-align: center;
align-items: center;
align-content: center;
margin-left: -25%;
}
.dd-button {
display: inline-block;
border: 1px solid gray;
border-radius: 4px;
padding: 10px 30px 10px 20px;
background-color: #ffffff;
cursor: pointer;
white-space: nowrap;
width: 375px;
}
.dd-button:after {
content: '';
position: absolute;
top: 50%;
left: 90%;
transform: translateY(-50%);
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid black;
}
.dd-button:hover {
background-color: #eeeeee;
}
.dd-input {
display: none;
}
.dd-menu {
position: relative;
top: 100%;
border: 1px solid #ccc;
border-radius: 4px;
padding: 0;
margin: 2px 0 0 0;
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
background-color: #ffffff;
list-style-type: none;
width: 375px;
}
.dd-input+.dd-menu {
display: none;
}
.dd-input:checked+.dd-menu {
display: block;
}
.dd-menu li {
padding: 10px 20px;
cursor: pointer;
white-space: nowrap;
}
.dd-menu li:hover {
background-color: #f6f6f6;
}
.dd-menu li a {
display: block;
margin: -10px -20px;
padding: 10px 20px;
}
.dd-menu li.divider {
padding: 0;
border-bottom: 1px solid #cccccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div id="result"></div>
<label class="dropdown" name="dropdown">
<div class="dd-button"> Selection</div>
<input type="checkbox" class="dd-input center-block" id="test">
<ul id = "dropdown" class="dd-menu">
<li>plan1 </li>
<li>plan2 </li>
<li>plan3 </li>
<li>Plan4 </li>
</ul>
</label>
</div>

You can simply use $(event.target).hasClass() condition to open or hide the dropdown...
Also don't use div inside a label because
Element div not allowed as child of element label in this context.
Stack Snippet
$('#dropdown li').click(function() {
$(".dd-button:first-child").text($(this).text());
});
$(document).on("click", function(event) {
if ($(event.target).hasClass("dd-button")) {
$("#dropdown").slideDown("fast");
} else {
$("#dropdown").slideUp("fast");
}
});
.dropdown {
display: inline-block;
position: relative;
}
.wrapper {
text-align: center;
align-items: center;
align-content: center;
}
.dd-button {
display: inline-block;
border: 1px solid gray;
border-radius: 4px;
padding: 10px 30px 10px 20px;
background-color: #ffffff;
cursor: pointer;
white-space: nowrap;
width: 375px;
}
.dd-button:after {
content: '';
position: absolute;
top: 50%;
left: 90%;
transform: translateY(-50%);
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid black;
}
.dd-button:hover {
background-color: #eeeeee;
}
.dd-input {
display: none;
}
.dd-menu {
position: relative;
top: 100%;
border: 1px solid #ccc;
border-radius: 4px;
padding: 0;
margin: 2px 0 0 0;
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
background-color: #ffffff;
list-style-type: none;
width: 375px;
}
.dd-input+.dd-menu {
display: none;
}
.dd-input:checked+.dd-menu {
display: block;
}
.dd-menu li {
padding: 10px 20px;
cursor: pointer;
white-space: nowrap;
}
.dd-menu li:hover {
background-color: #f6f6f6;
}
.dd-menu li a {
display: block;
margin: -10px -20px;
padding: 10px 20px;
}
.dd-menu li.divider {
padding: 0;
border-bottom: 1px solid #cccccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div id="result"></div>
<div class="dropdown" name="dropdown">
<div class="dd-button"> Selection</div>
<input type="checkbox" class="dd-input center-block" id="test">
<ul id="dropdown" class="dd-menu">
<li>plan1 </li>
<li>plan2 </li>
<li>plan3 </li>
<li>Plan4 </li>
</ul>
</div>
</div>

How to assign a tooltip to a div without javascript or JQuery?

I am trying to design a form where I have tool tips that are ALWAYS showing on the right side to help the users in filling out their forms. What I did was I assigned each parts in Divs and I want a tool tip for each one.
<div title="This is where you fill your first name in.">
<p> First Name: <input type="text" name="firstName"/> </p>
</div>
<div title="Last Name Entry">
<p> Last Name: <input type="text" name="lastName"/> </p>
</div>
<div title="OK!">
<input type="submit" style="width: 10em; margin: auto 0"/>
</div>
I found this neat website that helps you style in CSS with ease and I used a code that I generated through it:
a.tooltips {
position: relative;
display: inline;
}
a.tooltips span {
position: absolute;
width:140px;
color: #FFFFFF;
background: #000000;
height: 30px;
line-height: 30px;
text-align: center;
visibility: hidden;
border-radius: 6px;
}
a.tooltips span:after {
content: '';
position: absolute;
top: 50%;
right: 100%;
margin-top: -8px;
width: 0; height: 0;
border-right: 8px solid #000000;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
}
a:hover.tooltips span {
visibility: visible;
opacity: 0.8;
left: 100%;
top: 50%;
margin-top: -15px;
margin-left: 15px;
z-index: 999;
}
courtesy of:
http://html-generator.weebly.com/
Thanks in advance!

Well, I can give you answer for you question from title.
I always use CSS3 pseudo elements and data atribute to accomplished that without any jQuery code.
This is CSS3:
[data-tip] {
position:relative
}
[data-tip]:before {
content: '';
display: none;
border: 5px solid #000;
border-top-color: #000;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
position: absolute;
top: -7px;
left: 10px;
z-index: 8;
font-size: 0;
line-height: 0;
width: 0;
height: 0;
}
[data-tip]:after {
display: none;
content: attr(data-tip);
position: absolute;
top: -35px;
left: 0px;
padding: 0px 8px;
background: #000;
color: #fff;
z-index: 9;
font-size: 13px;
height: 28px;
line-height: 28px;
white-space: nowrap;
word-wrap: normal;
}
[data-tip]:hover:before, [data-tip]:hover:after {
display: block;
}
.tip-below[data-tip]:after {
top: 23px;
left: 0px;
}
.tip-below[data-tip]:before {
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: #1a1a1a;
border-left-color: transparent;
top: 13px;
left: 10px;
}
And HTML would b:
some text here
Instead of bellow you can make to right side.

Here's a FIDDLE
In the fiddle tooltip works on focus but if you remove opacity it'll be always shown
<input type="text" name="firstName" placeholder="First Name"><span class="tooltip">Tooltip 1 content</span>
<input type="text" name="lastName" placeholder="Last Name"><span class="tooltip">Tooltip 2 content</span>
input {
float: left;
clear: left;
width: 200px;
margin: 0 0 12px;
padding: 5px;
border: 1px solid #ddd;
}
.tooltip {
position: relative;
float: left;
margin-left: 10px;
padding: 0 5px;
line-height: 26px;
color: #555;
opacity: 0;
border: 1px solid #ccc;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
transition: opacity 0.3s ease-in-out;
-moz-transition: opacity 0.3s ease-in-out;
-webkit-transition: opacity 0.3s ease-in-out;
}
.tooltip:after, .tooltip:before {
right: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.tooltip:after {
border-color: rgba(200,200,200,0);
border-right-color: #ddd;
border-width: 8px;
margin-top: -8px;
}
input:focus + .tooltip {
opacity: 1;
}