Tooltip Pulse

Developer
Brock Nunn
Size
3,551 Kb
Views
12,144
  1. Tooltip Pulse Previews
  2. Tooltip Pulse HTML Codes
  3. Tooltip Pulse CSS Codes
  4. Tooltip Pulse JS Codes

How do I make an tooltip pulse?

A simple pulse animation for eye-catching tooltips. Configure using the variables at the top!. What is a tooltip pulse? How do you make a tooltip pulse? This script and codes were developed by Brock Nunn on 06 January 2023, Friday.

Tooltip Pulse Previews
IQ Test

Tooltip Pulse - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Tooltip Pulse</title> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.0.3/js.cookie.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:700,300' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>I'm Just A <span>Pulsing</span> Tooltip</h1>
<div class="wrap"> <a href="" class="tooltip animating"><span class="fa fa-info-circle"></span></a>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Tooltip Pulse - Script Codes CSS Codes

html { background: #616161; background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #616161), color-stop(100%, #181e24)); background: -webkit-radial-gradient(center, ellipse cover, #616161 0%, #181e24 100%); background: -webkit-radial-gradient(center ellipse, #616161 0%, #181e24 100%); background: radial-gradient(ellipse at center, #616161 0%, #181e24 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#616161', endColorstr='#181e24', GradientType=1 ); position: absolute; top: 0; bottom: 0; right: 0; left: 0;
}
h1 { text-align: center; color: #ccc; font-weight: 200; text-transform: uppercase; font-family: 'Open Sans Condensed'; font-size: 4em;
}
h1 span { color: #85bbe1;
}
.wrap { height: 3em; width: 3em; margin: 0 auto; -webkit-transform: translateY(100%); transform: translateY(100%); text-align: center; background: #fff; padding: 3em 2em 1em; border-radius: 50%; box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.15);
}
.wrap a { position: relative; display: inline-block; color: #3b92d5; font-size: 1em;
}
.tooltip { height: .85em; width: .85em; font-size: 1em; border-radius: 100%; -webkit-animation-timing-function: steps(45); animation-timing-function: steps(45); -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; position: relative;
}
.tooltip.animating { -webkit-animation: pulse 5s infinite; animation: pulse 5s infinite;
}
.tooltip span:before { position: relative; top: -1.5px;
}
@-webkit-keyframes pulse { 0% { box-shadow: 0 0 0 0 transparent; -webkit-transform: translateX(-50px); transform: translateX(-50px); } 25% { box-shadow: 0px 0px 0px 4px #85bce5; -webkit-transform: translateY(50px); transform: translateY(50px); } 50% { box-shadow: 0px 0px 0px 4px #85bbe1, 0px 0px 0px 8px #c6dcf3; -webkit-transform: translateX(50px); transform: translateX(50px); } 75% { box-shadow: 0px 0px 0px 4px #85bce5; -webkit-transform: translateY(-50px); transform: translateY(-50px); } 100% { box-shadow: 0 0 0 0 transparent; -webkit-transform: translateX(-50px); transform: translateX(-50px); }
}
@keyframes pulse { 0% { box-shadow: 0 0 0 0 transparent; -webkit-transform: translateX(-50px); transform: translateX(-50px); } 25% { box-shadow: 0px 0px 0px 4px #85bce5; -webkit-transform: translateY(50px); transform: translateY(50px); } 50% { box-shadow: 0px 0px 0px 4px #85bbe1, 0px 0px 0px 8px #c6dcf3; -webkit-transform: translateX(50px); transform: translateX(50px); } 75% { box-shadow: 0px 0px 0px 4px #85bce5; -webkit-transform: translateY(-50px); transform: translateY(-50px); } 100% { box-shadow: 0 0 0 0 transparent; -webkit-transform: translateX(-50px); transform: translateX(-50px); }
}

Tooltip Pulse - Script Codes JS Codes

$('.tooltip').hover(function(){ $(this).removeClass('animating'); Cookies.set('name', {foo: 'bar'});
});
var thing = Cookies.get();
console.log(thing);
Tooltip Pulse - Script Codes
Tooltip Pulse - Script Codes
Home Page Home
Developer Brock Nunn
Username banunn
Uploaded January 06, 2023
Rating 3
Size 3,551 Kb
Views 12,144
Do you need developer help for Tooltip Pulse?

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!

Brock Nunn (banunn) Script Codes
Name
Simple jQuery .fadeToggle demo
Simple Responsive Navigation
Modern Web Button
Font Awesome Icon Fonts CDN
Off Canvas Navigation
Flat UI Alert
Learning Flexbox
JQuery Add and Remove Items
A Pen by Brock Nunn
Super Simple Slideshow
Create amazing video scripts 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!