I have made a toggle-switch in HTML with a label and styled in css. When the toggle is on its working as intended, but when its off the label overlaps with the switch.
The toggle container wont layer on top of the label element. I have tried with z-index and different positions, but to no avail.
Built with React, and the CSS is in the pre-made App.css file.
React // HTML // Javascript
const toggleClasses = classNames('wrg-toggle', {
'wrg-toggle--checked': toggle,
'wrg-toggle--disabled': disabled
}, className);
return(
<div
onMouseOver={() => setHoveredElement(5)}
onMouseLeave={() => setHoveredElement(null)}
>
<div onClick={triggerToggle} className={toggleClasses}>
<div className="wrg-toggle-container">
<label htmlFor="grid">Enable grid</label>
<div className="wrg-toggle-check">
<span>{ getIcon('checked')}</span>
</div>
<div className="wrg-toggle-uncheck">
<span>{ getIcon('unchecked')}</span>
</div>
</div>
<div className="wrg-toggle-circle"></div>
<input type="checkbox" aria-label="Toggle Button" className="wrg-toggle-input" />
</div>
</div>
);
};
CSS code
.wrg-toggle {
touch-action: pan-x;
display: inline-block;
position: relative;
cursor: pointer;
background-color: transparent;
border: 0;
padding: 0;
margin-left: 5em;
-webkit-touch-callout: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent;
}
.wrg-toggle-input {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.wrg-toggle-check, .wrg-toggle-uncheck {
position: absolute;
width: 10px;
height: 10px;
top: 0;
bottom: 0;
margin-top: auto;
margin-bottom: auto;
line-height: 0;
opacity: 0;
}
.wrg-toggle-check {
z-index: 3;
left: 8px;
position: absolute;
opacity: 0;
}
.wrg-toggle-uncheck {
opacity: 1;
right: 10px;
top: 2px;
position:inherit;
z-index: 50;
opacity: 1;
background-color: white;
}
label {
float: right;
right: 0.5em;
width: 8em;
margin-left: 0px;
text-align: center;
margin-right: 20px;
background-color: #8E9092;
border-radius: 30px;
border-top-right-radius: 0;
border-bottom-right-radius: 0 ;
height: 24px;
border: solid 1px;
top: -1.3px;
position: relative;
z-index: 0;
}
.wrg-toggle-uncheck span,
.wrg-toggle-check span {
align-items: center;
display: flex;
height: 10px;
justify-content: center;
position: relative;
width: 10px;
}
.wrg-toggle-container{
width: 50px;
height: 24px;
padding: 0;
left: 10em;
border-radius: 30px;
background-color: #f5f6f8;
transition: all .2s ease;
border: solid 1px;
z-index: 100;
}
.wrg-toggle-container .wrg-toggle-check{
width: 50px;
height: 24px;
left: -0.3px;
border-radius: 30px;
background-color:#61dafb;
border: solid 1px;
top: 0px;
}
.wrg-toggle-circle{
transition: all .5s cubic-bezier(.23,1,.32,1) 0ms;
position: absolute;
top: 3px;
left: 1px;
width: 22px;
height: 21px;
border: 1px solid #4d4d4d;
border-radius: 50%;
background-color: #fafafa;
box-sizing: border-box;
z-index: 30;
}
.wrg-toggle--checked .wrg-toggle-check{
opacity: 1;
position:relative;
border-top: 2px;
border-left: -3px;
}
.wrg-toggle--checked .wrg-toggle-uncheck {
opacity: 0;
border: 0;
}
.wrg-toggle--checked .wrg-toggle-circle {
left: 27px;
}
.wrg-toggle--checked .wrg-toggle-circle:after {
content: "✔";
color: green;
}
Solved!
added a
.wrg-toggle-container .wrg-toggle-uncheck {
position: absolute;
z-index: 1;
}
Related
I have created a loading page with css and html. I would like to display a loading bar to display when the page is loading, between 0% to 100%.I have used justify-content:space-between to solve this but I can't seem to make this work. I have read previous posts on this in the forum but am still stuck. here is my code, both html and css
<body>
<div class="loading">
<div class="loading__box">
<div class="loading__text">
<div class="loading__text--border"></div>
L
<div class="loading__text--dot"></div>
OADING EXPERIENCE
</div>
<div class="loading__bar">
<div class="loading__bar--inner"></div>
</div>
<div class="loading__counter">
<span>0%</span>
<div class="loading__counter--number">100%</div>
</div>
</div>
</div>
</body>
base.scss
body {
margin: 0;
box-sizing: border-box;
&::after,
&::before {
box-sizing: border-box;
}
}
html, body {
overflow-x: hidden;
}
body{
font-family: 'Poppins', sans-serif;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
```
loader.scss
```
.loading {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100vh;
width: 100%;
z-index: 99;
background: #0b134f;
place-items: center;
display: grid;
font-family: "Orbitron", sans-serif;
&__box {
position: relative;
width: 500px;
height: 200px;
border: 3px solid #6cff8d;
border-top: 3px solid #6cff8c7a;
border-bottom: 3px solid #6cff8c7a;
}
&__bar {
width: 90%;
height: 10%;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%);
background: #ccc;
border-radius: 2px;
&--inner {
height: 100%;
width: 50%;
border-radius: 2px;
background: #6cff8d;
}
}
&__text {
position: relative;
color: #fff;
padding: 1rem;
font-size: 20px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
&--dot {
width: 15px;
height: 15px;
margin: 0 3px;
border-radius: 50%;
animation: pulse 1s infinite;
background: #fff;
#keyframes pulse {
from {
opacity: 0;
background: #6cff8d;
}
to {
opacity: 1;
}
}
}
&--border {
width: 85%;
height: 1px;
background: #6cff8c7a;
position: absolute;
bottom: 0;
left: 50px;
transform: translateY(-50%);
}
}
&__counter {
position: absolute;
top: 70%;
left: 0;
color: #fff;
font-size: 20px;
font-weight: 700;
width: 100px;
display: flex;
justify-content: space-between;
padding-left: 10px;
}
}
```
you need to edit you .loading__counter:
width: 100%;
box-sizing: border-box;
padding: 0 10px;
See the working example below:
body {
margin: 0;
box-sizing: border-box;
&::after,
&::before {
box-sizing: border-box;
}
}
html, body {
overflow-x: hidden;
}
body{
font-family: 'Poppins', sans-serif;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
.loading {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100vh;
width: 100%;
z-index: 99;
background: #0b134f;
place-items: center;
display: grid;
font-family: "
Orbitron"
, sans-serif;
}
.loading__box {
position: relative;
width: 500px;
height: 200px;
border: 3px solid #6cff8d;
border-top: 3px solid #6cff8c 7a;
border-bottom: 3px solid #6cff8c 7a;
}
.loading__bar {
width: 90%;
height: 10%;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%);
background: #ccc;
border-radius: 2px;
}
.loading__bar--inner {
height: 100%;
width: 50%;
border-radius: 2px;
background: #6cff8d;
}
.loading__text {
position: relative;
color: #fff;
padding: 1rem;
font-size: 20px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}
.loading__text--dot {
width: 15px;
height: 15px;
margin: 0 3px;
border-radius: 50%;
animation: pulse 1s infinite;
background: #fff;
}
#keyframes pulse {
from {
opacity: 0;
background: #6cff8d;
}
to {
opacity: 1;
}
}
.loading__text--border {
width: 85%;
height: 1px;
background: #6cff8c 7a;
position: absolute;
bottom: 0;
left: 50px;
transform: translateY(-50%);
}
.loading__counter {
position: absolute;
top: 70%;
left: 0;
color: #fff;
font-size: 20px;
font-weight: 700;
width: 100%;
display: flex;
justify-content: space-between;
box-sizing: border-box;
padding: 0 10px;
}
<body>
<div class="loading">
<div class="loading__box">
<div class="loading__text">
<div class="loading__text--border"></div>
L
<div class="loading__text--dot"></div>
OADING EXPERIENCE
</div>
<div class="loading__bar">
<div class="loading__bar--inner"></div>
</div>
<div class="loading__counter">
<span>0%</span>
<div class="loading__counter--number">100%</div>
</div>
</div>
</div>
</body>
As u can see, my curtain is open every time u first run up the site. The curtain opens when u click Account and closes when u click it again. I need to have the curtain closes and open only when someone clicks Account. Then, I need also that, when u click Account, the world became of the gradient of the background and the background himself get white.
function open_ac_c() {
document.getElementById("ac_c").style.height = "100%";
document.querySelector('button.account_open_button').style.display = "none"
document.querySelector('button.account_close_button').style.display = "block"
}
function close_ac_c() {
document.getElementById("ac_c").style.height = "0%";
document.querySelector('button.account_open_button').style.display = "block"
document.querySelector('button.account_close_button').style.display = "none"
}
body {
background-color: #6f0da8;
margin: 0;
}
.topnav {
background: linear-gradient(90deg, #2c8a86, #1dada7, #04d6ce, #00fff6);
padding: 30px;
float: center;
}
.home {
background-color: transparent;
float: center;
position: absolute;
left: 0px;
top: 0px;
padding: 18.5px;
color: white;
font-size: 20px;
}
.home:hover{
background-color: #048b59;
}
.account{
background-color: transparent;
float: center;
position: absolute;
left: 86px;
top: 0px;
padding: 18.5px;
color: white;
font-size: 20px;
}
body {
font-family: 'Lato', sans-serif;
}
.ac_curtain {
position: fixed;
top: 1;
left: 100px;
background-color: transparent;
transition: 1s;
overflow: hidden;
}
.ac_curtain a {
padding: 8px;
text-decoration: none;
font-size: 20px;
color: #ffffff;
display: block;
}
.account_open_button {
position: absolute;
background-color: Transparent;
background-repeat: no-repeat;
border: none;
position: absolute;
left: 85px;
top: 1px;
padding: 28px 53px;;
}
.account_close_button {
position: absolute;
background-color: Transparent;
background-repeat: no-repeat;
border: none;
position: absolute;
left: 85px;
top: 1px;
padding: 30px 53px;;
}
<div class="topnav">
<dive class="home">Home</dive>
<dive class="account">Account</div>
</div>
<div id="ac_c" class="ac_curtain">
<div class="overlay-content">
Log in
Log out
Dashboard
Settings
</div>
</div>
<button onclick="open_ac_c()" class="account_open_button"></button>
<button onclick="close_ac_c()" class="account_close_button"></button>
On initial load, as the height of ac_curtain is not defined, hence it has a default height and thus it gets displayed on the initial load. Please add height: 0 in the ac_curtain class.
function open_ac_c() {
document.getElementById("ac_c").style.height = "100%";
document.querySelector('button.account_open_button').style.display = "none"
document.querySelector('button.account_close_button').style.display = "block"
}
function close_ac_c() {
document.getElementById("ac_c").style.height = "0%";
document.querySelector('button.account_open_button').style.display = "block"
document.querySelector('button.account_close_button').style.display = "none"
}
body {
background-color: #6f0da8;
margin: 0;
}
.topnav {
background: linear-gradient(90deg, #2c8a86, #1dada7, #04d6ce, #00fff6);
padding: 30px;
float: center;
}
.home {
background-color: transparent;
float: center;
position: absolute;
left: 0px;
top: 0px;
padding: 18.5px;
color: white;
font-size: 20px;
}
.home:hover{
background-color: #048b59;
}
.account{
background-color: transparent;
float: center;
position: absolute;
left: 86px;
top: 0px;
padding: 18.5px;
color: white;
font-size: 20px;
}
body {
font-family: 'Lato', sans-serif;
}
.ac_curtain {
position: fixed;
top: 1;
left: 100px;
background-color: transparent;
transition: 1s;
overflow: hidden;
height: 0;
}
.ac_curtain a {
padding: 8px;
text-decoration: none;
font-size: 20px;
color: #ffffff;
display: block;
}
.account_open_button {
position: absolute;
background-color: Transparent;
background-repeat: no-repeat;
border: none;
position: absolute;
left: 85px;
top: 1px;
padding: 28px 53px;;
}
.account_close_button {
position: absolute;
background-color: Transparent;
background-repeat: no-repeat;
border: none;
position: absolute;
left: 85px;
top: 1px;
padding: 30px 53px;;
}
<div class="topnav">
<div class="home">Home</div>
<div class="account">Account</div>
</div>
<div id="ac_c" class="ac_curtain">
<div class="overlay-content">
Log in
Log out
Dashboard
Settings
</div>
</div>
<button onclick="close_ac_c()" class="account_close_button"></button>
<button onclick="open_ac_c()" class="account_open_button"></button>
To be precise I have:
$('.vidsh_sub_btn').on('click', function() {
$('.vidsub_rld_c').toggleClass('goright');
// toggle godown class while goright class is completed moving left to 75px
$('.vidsub_rld_c').toggleClass('godown');
$('.vidsub_rld_c').toggleClass('goleft');
$('.vidsub_rld_c').toggleClass('gotop');
});
.vidsubbtn_c {
position: absolute;
height: 34px;
width: 84px;
background: black;
overflow: hidden;
}
.vidsub_rld_c {
position: absolute;
height: 10px;
width: 10px;
background: white;
transition: all 700ms;
left: 0px;
z-index: 50;
}
.vidsub_rld_c.goright {
left: 75px;
}
.vidsub_rld_c.godown {
top: 25px;
}
.vidsub_rld_c.goleft {
left: 0px;
}
.vidsub_rld_c.gotop {
top: 0px;
}
.vidsh_sub_btn {
position: absolute;
z-index: 100;
margin-top: 2px;
margin-left: 2px;
height: 30px;
width: 80px;
overflow: hidden;
background: #8495a4;
-moz-border-radius: 2px;
border-radius: 2px;
font-family: Arial;
color: #ffffff;
font-size: 14px;
text-decoration: none;
border: 0;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="vidsubbtn_c">
<div class="vidsub_rld_c"></div>
<input type="button" class="vidsh_sub_btn" value="Add" />
</div>
What I basically want is that vidsub_rld_c should complete a circle of the button which basically would look like a loading object.
But the way I have implemented in my script is that when the click event listener is called it executes all of the toggle classes at the same time which makes the loader looking like its not moving.
JSFiddle
You could toggle one class, and use CSS animations to create the effect.
fiddle
A basic example:
$('.vidsh_sub_btn').on('click', function() {
$('.vidsub_rld_c').toggleClass('animate');
});
.vidsubbtn_c {
position: absolute;
height: 34px;
width: 84px;
background: black;
overflow: hidden;
}
.vidsub_rld_c {
position: absolute;
height: 10px;
width: 10px;
background: white;
transition: all 700ms;
left: 0px;
z-index: 50;
}
.vidsub_rld_c.animate {
animation: moveAround 1s infinite;
}
#keyframes moveAround {
0% {
left: 0;
top: 0;
}
25% {
left: 75px;
top: 0;
}
50% {
left: 75px;
top: 25px;
}
75% {
left: 0;
top: 25px;
}
100% {
left: 0;
top: 0;
}
}
.vidsh_sub_btn {
position: absolute;
z-index: 100;
margin-top: 2px;
margin-left: 2px;
height: 30px;
width: 80px;
overflow: hidden;
background: #8495a4;
-moz-border-radius: 2px;
border-radius: 2px;
font-family: Arial;
color: #ffffff;
font-size: 14px;
text-decoration: none;
border: 0;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="vidsubbtn_c">
<div class="vidsub_rld_c"></div>
<input type="button" class="vidsh_sub_btn" value="Add" />
</div>
You could use jQuery UI so you can chain your class toggles
like:
$('.vidsh_sub_btn').on('click', function() {
$('.vidsub_rld_c').toggleClass('goright', 2000).promise().done(function(){
$('.vidsub_rld_c').toggleClass('godown', 2000);
});
});
https://codepen.io/anon/pen/QajaPm
Updated fiddle.
You could use setInterval to complete the circle by toggling the classes continuously after every 'x' time, like :
$('.vidsh_sub_btn').on('click', function() {
setInterval(function() {
$('.vidsub_rld_c').toggleClass('godown');
$('.vidsub_rld_c').toggleClass('goright');
}, 700);
});
Code:
$('.vidsh_sub_btn').on('click', function() {
setInterval(function() {
$('.vidsub_rld_c').toggleClass('godown');
$('.vidsub_rld_c').toggleClass('goright');
}, 700);
});
.vidsubbtn_c {
position: absolute;
height: 34px;
width: 84px;
background: black;
overflow: hidden;
}
.vidsub_rld_c {
position: absolute;
height: 10px;
width: 10px;
background: white;
transition: all 700ms;
left: 0px;
z-index: 50;
}
.vidsub_rld_c.goright {
left: 75px;
}
.vidsub_rld_c.godown {
top: 25px;
}
.vidsh_sub_btn {
position: absolute;
z-index: 100;
margin-top: 2px;
margin-left: 2px;
height: 30px;
width: 80px;
overflow: hidden;
background: #8495a4;
-moz-border-radius: 2px;
border-radius: 2px;
font-family: Arial;
color: #ffffff;
font-size: 14px;
text-decoration: none;
border: 0;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="vidsubbtn_c">
<div class="vidsub_rld_c"></div>
<input type="button" class="vidsh_sub_btn" value="Add" />
</div>
How to achieve the carousel of multiple divs after clicking on add button? For each loop will repeat the div for every click of Add button. After click, multiple divs to be placed side by side and when it is overflow we need to do the carousel functionality for it with arrow marks as next and prev. Any Ideas on how to solve this?
.small-header {
min-height: 124px;
background-position: center right;
text-align: center;
display: table;
width: 100%;
padding: 22px 20px 0;
background: #fff;
box-sizing: border-box;
}
.small-header .vertical-align {
display: table-cell;
vertical-align: middle;
}
.component-carousel {
width: 530px;
display: block;
margin: 0 auto;
position: relative;
margin-bottom: 40px;
}
.component-carousel:before {
left: 0;
}
.component-carousel:after, .component-carousel:before {
content: "";
display: block;
position: absolute;
top: 0;
width: 20%;
height: 100%;
z-index: 1;
}
.component-carousel .outer-content {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.component-carousel .items {
position: relative;
height: 190px;
left: 145px;
}
.component-carousel .items .item {
top: 0;
left: -50px;
height: 190px;
box-sizing: border-box;
float: left;
margin: 0 20px 0 0;
position: relative;
display: table;
}
.your {
display: block;
height: 290px;
border: 2px solid #5e6a71;
text-align: center;
font-weight: 600;
letter-spacing: 1px;
padding: 15px 0 0 0;
width: 244px;
position: relative;
background: #fff;
}
.component-carousel .bullets {
position: absolute;
bottom: -25px;
width: 100%;
text-align: center;
z-index: 3;
}
.component-carousel .bullets li {
transition: all .15s ease-out;
display: inline-block;
margin: 0 3px;
}
.your>p.card-number {
margin-top: 95px;
margin-bottom: 10px;
position: relative;
color: #5e6a71;
}
.your .infonumber {
display: block;
}
.your p.card-number:after {
content: "";
display: block;
width: 70%;
height: 1px;
background: #bec3c6;
margin: 0 auto;
margin-top: 7px;
}
.card-left:after {
content: "";
display: block;
position: absolute;
width: 1px;
height: 95px;
background: #cecfd1;
right: -15px;
top: 0;
}
.card-detail-container {
display: block;
position: absolute;
width: 100%;
height: 80px;
left: 0;
top: 180px;
color: #5e6a71;
}
.card-left {
display: block;
float: left;
width: 50%;
position: relative;
padding:0 18px;
}
.card-right {
display: block;
float: left;
width: 50%;
position: relative;
padding:0 35px;
}
.card-detail-container p {
line-height: 14px !important;
}
.component-carousel.show-two .controls {
display: none;
}
.component-carousel .controls {
width: 100%;
height: 100%;
z-index: 2;
position: absolute;
top: 0;
}
.component-carousel .controls li.disabled {
opacity: .2;
cursor: pointer;
}
.component-carousel .controls li:first-child {
left: 0;
}
.component-carousel .controls li {
transition: all .15s ease-out;
position: absolute;
top: 0;
cursor: pointer;
background: url(/image/component/carousel/arrows.png) no-repeat center left;
height: 100%;
width: 19px;
}
.component-carousel .controls li:last-child {
right: 0;
background-position: center right;
}
.button {
border: 1px solid #a8a8a8;
font-size: 14px;
font-weight: 600;
background: #FFFFFF;
position: relative;
text-decoration: none;
white-space: normal;
cursor: pointer;
color: #292929;
}
.btn {
position: relative;
color: #4f4f4f;
left: 38%;
width: 25% !important;
max-width: 580px;
text-transform: capitalize;
}
#using (Html.BeginForm("", "", FormMethod.Post, new { #class = "form-horizontal" }))
{
if (Model.Details != null && Model.Details.Count() > 0)
{
<div class="small-header">
<div class="vertical-align">
<div class="component-carousel">
<div class="outer-content">
<div class="mask">
<ul class="items" style="transform: matrix(1, 0, 0, 1, 0, 0);">
<li class="item">
#foreach (var item in Model)
{
<div class="your">
<p class="card-number">
<span class="infonumber">123456</span>
</p>
<div class="card-detail-container">
<div class="card-left">
<p class="card-shape-title">Circle</p>
<p class="card-barcode-title">24242</p>
</div>
<div class="card-right">
<p class="card-carat-title">222</p>
<p class="card-certificate-title"></p>
</div>
</div>
</div>
}
</li>
</ul>
</div>
</div>
<ul class="controls">
<li class="prev disabled"></li>
<li class="next"></li>
</ul>
</div>
</div>
</div>
}
<div class="btns">
<button type="submit" id="addinfo" class="btn button" value="Add">Add<span></span><span></span></button>
</div>
}
Hi I've problem with my tooltip the arrow doesn't show, also I don't how to place the arrow on front of the tooltip, I included a image of the tooltip I would like to design.I started to learn html5 and css3, can anyone help please.
a.tooltips {
position: relative;
display: inline;
}
a.tooltips span {
position: absolute;
width:140px;
color: #FFFFFF;
background: #000000;
height: 73px;
line-height: 73px;
text-align: center;
visibility: hidden;
border-radius: 3px;
}
a.tooltips span::before {
content:"\2190";
position: absolute;
top: 100%;
left: 50%;
margin-left: -8px;
/* width: 0; height: 0;
border-top: 8px solid #000000;
border-right: 8px solid transparent;
border-left: 8px solid transparent; */
}
.span-content:after {
font-family: FontAwesome;
content: "";
position: absolute;
top: 3px;
left: 7px;
}
.wrap-content{
position:relative
}
a:hover.tooltips span {
visibility: visible;
opacity: 0.4;
bottom: 30px;
left: 50%;
margin-left: -76px;
z-index: 999;
}
.wrap-arrow{
widows:50px ;
height:50px ;
}
span.arrowup{
background-image: url('arrowup.png') ;
}
<div style="margin-top:200px;margin-left:200px" >
<a class="tooltips" href="#">bankcheck
<span>Tooltipbankcheck</span></a>
<span class="wrap-content span-content"></span></a>
<span class="wrap-arrow arrowup"></span>
</div>
I hope the issue is about positioning. Check below snippet for reference.
a.tooltips {
position: relative;
display: inline;
}
a.tooltips span {
position: absolute;
width: 140px;
color: #FFFFFF;
background: #000000;
height: 73px;
line-height: 73px;
text-align: center;
visibility: hidden;
border-radius: 3px;
}
a.tooltips span::before {
content: "\21D3";
position: absolute;
bottom: -50%;
left: 50%;
color: red;
}
.span-content:after {
font-family: FontAwesome;
content: "";
position: absolute;
top: 3px;
left: 7px;
}
.wrap-content {
position: relative
}
a:hover.tooltips span {
visibility: visible;
opacity: 0.7;
bottom: 30px;
left: 50%;
margin-left: -76px;
z-index: 999;
}
.wrap-arrow {
widows: 50px;
height: 50px;
}
span.arrowup {
background-image: url('arrowup.png');
}
<div style="margin-top:200px;margin-left:200px">
<a class="tooltips" href="#">bankcheck
<span>Tooltipbankcheck</span></a>
<span class="wrap-content span-content"></span></a>
<span class="wrap-arrow arrowup"></span>
</div>