Guided Tour Tooltip

Developer
APinix
Size
2,906 Kb
Views
12,144
  1. Guided Tour Tooltip Previews
  2. Guided Tour Tooltip HTML Codes
  3. Guided Tour Tooltip CSS Codes

How do I make an guided tour tooltip?

Just a tooltip. What is a guided tour tooltip? How do you make a guided tour tooltip? This script and codes were developed by APinix on 11 January 2023, Wednesday.

Guided Tour Tooltip Previews
IQ Test

Guided Tour Tooltip - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Guided Tour Tooltip</title> <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="tooltip"> <h1>This is the Title</h1> <div class="content-frame"> <div class="cont"> <a href=""> <p><span>Start Date: </span>2008-08-12 17:04:00</p> <p><span>End Date: </span>2008-08-12 20:48:00</p> <p><span>Summary: </span>Episode</p> </a> </div> <div class="cont"> <a href=""> <p><span>Start Date: </span>2008-08-12 17:04:00</p> <p><span>End Date: </span>2008-08-12 20:48:00</p> <p><span>Summary: </span>Episode</p> </a> </div> <div class="cont"> <a href=""> <p><span>Start Date: </span>2008-08-12 17:04:00</p> <p><span>End Date: </span>2008-08-12 20:48:00</p> <p><span>Summary: </span>Episode</p> </a> </div> </div> <div class="base"> <ul class="footer-nav"> <div class="num-events"><strong>427</strong> events</div> <a href="#" class="open">OPEN <i class="fa fa-chevron-right"></i></a> </ul> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Guided Tour Tooltip - Script Codes CSS Codes

/* Base */
* {	margin: 0;	padding: 0;	-webkit-box-sizing: border-box;	-moz-box-sizing: border-box;	-ms-box-sizing: border-box;	box-sizing: border-box;
}
body {	font-family: 'Montserrat', sans-serif;	font-weight: 300;	background: gray;	width: 100%;	height: 100%;	-webkit-font-smoothing: antialiased;
}
/* Sections */
.content-frame {	max-width: 300px;	max-height: 114px;	overflow: auto;
}
/*.content-frame:after { background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,1) 85%, rgba(255,255,255,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,0.8)), color-stop(85%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,1))); background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 50%,rgba(255,255,255,1) 85%,rgba(255,255,255,1) 100%); background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 50%,rgba(255,255,255,1) 85%,rgba(255,255,255,1) 100%); background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 50%,rgba(255,255,255,1) 85%,rgba(255,255,255,1) 100%); background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 50%,rgba(255,255,255,1) 85%,rgba(255,255,255,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); width: 100%; height: 20px; position: absolute; bottom: 40px; content: ""; pointer-events: none;
}
.content-frame:before { background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 15%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(15%,rgba(255,255,255,1)), color-stop(50%,rgba(255,255,255,0.8)), color-stop(100%,rgba(255,255,255,0))); background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 15%,rgba(255,255,255,0.8) 50%,rgba(255,255,255,0) 100%); background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 15%,rgba(255,255,255,0.8) 50%,rgba(255,255,255,0) 100%); background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 15%,rgba(255,255,255,0.8) 50%,rgba(255,255,255,0) 100%); background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 15%,rgba(255,255,255,0.8) 50%,rgba(255,255,255,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); width: 100%; height: 20px; position: absolute; top: 48px; content: ""; pointer-events: none;
}*/
.content-frame p {	color: #888;	font-size: 14px;	line-height: 1.6;
}
.content-frame .cont {	border-bottom: 1px solid #F5F5F5;	/*padding: 5px 0;*/
}
.content-frame .cont:last-child {	border: none;	padding-bottom: 0;
}
.content-frame .cont span {	/*font-weight: bold;*/ color: #323a44;
}
.cont a {	text-decoration: none; color: #888; display: block; padding: 5px 20px;
}
.cont a:hover { background: #cdcdcd;
}
/*.cont:first-child { margin-top: 15px;
}
.cont:last-child { margin-bottom: 15px;
}*/
.tooltip h1 {	color: #8EC49F;	font-size: 18px;	font-weight: bold;	line-height: 1.6;	margin-bottom: 6px;	padding: 20px 20px 0 20px; /*text-overflow: ellipsis;	white-space: nowrap;	overflow: hidden;*/
}
.tooltip .base {	height: 40px;	width: 300px;	background-color: #323a44;	border-radius: 0 0 6px 6px;
}
.footer-nav a {	display: inline-block; text-decoration: none;	padding: 10px 16px;	line-height: 20px;	color: white;	font-size: 12px;
}
.footer-nav .num-events {	border-radius: 0 0 0 5px; display: inline-block;	pointer-events: none;	color: #888; padding: 10px 16px;	line-height: 20px;
}
.footer-nav .num-events strong {	font-size: 15px;	color: #fff;
}
.footer-nav .open {	border-radius: 0 0 5px 0;	background-color: #8EC49F;	position: absolute;	right: 0;	font-weight: bold;	padding-right: 18px;
}
.footer-nav .open:hover {	background-color: #69B07F;
}
/* Tooltip Base */
.tooltip {	position: absolute;	background: #FFF;	border: 0px solid #CCC;	border-radius: 6px;	width: 300px;	top: 32%;	left: 50%;	margin-left: -150px; -webkit-box-shadow: 0px 0px 5px rgba(50, 50, 50, 0.75); -moz-box-shadow: 0px 0px 5px rgba(50, 50, 50, 0.75); box-shadow: 0px 0px 5px rgba(50, 50, 50, 0.75);	-webkit-transition: all .1s ease-out; -moz-transition: all .1s ease-out; -o-transition: all .1s ease-out; -ms-transition: all .1s ease-out; transition: all .1s ease-out;
}
.tooltip:after, .tooltip:before {	bottom: 100%;	border: solid transparent;	content: " ";	height: 0;	width: 0;	position: absolute;	pointer-events: none;
}
.tooltip:after {	border-color: rgba(239, 239, 239, 0);	border-bottom-color: #FFF;	border-width: 10px;	left: 50%;	margin-left: -10px;
}
.tooltip:before {	border-color: rgba(204, 204, 204, 0);	border-bottom-color: transparent;	border-width: 11px;	left: 50%;	margin-left: -11px;
}
Guided Tour Tooltip - Script Codes
Guided Tour Tooltip - Script Codes
Home Page Home
Developer APinix
Username aPinix
Uploaded January 11, 2023
Rating 3
Size 2,906 Kb
Views 12,144
Do you need developer help for Guided Tour Tooltip?

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!

APinix (aPinix) Script Codes
Name
Schedule a notification
SASS Clock
Pure CSS Tooltip
Blur Hover Effect
Wheel Menu
CSS Spinner
Real Sass Line-Clamp
CSS Infinite 360
CSS Clock
Knob with Snap
Create amazing blog posts 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!