JQuery Tooltip Plugin

Developer
James Podles
Size
2,968 Kb
Views
12,144
  1. JQuery Tooltip Plugin Previews
  2. JQuery Tooltip Plugin HTML Codes
  3. JQuery Tooltip Plugin CSS Codes
  4. JQuery Tooltip Plugin JS Codes

How do I make an jquery tooltip plugin?

What is a jquery tooltip plugin? How do you make a jquery tooltip plugin? This script and codes were developed by James Podles on 23 November 2022, Wednesday.

JQuery Tooltip Plugin Previews
IQ Test

JQuery Tooltip Plugin - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>jQuery Tooltip Plugin</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { background: #314963; font-family: 'Helvetica Neue', 'Arial', sans-serif;
}
#tooltipme { color: #fafafa; border-radius: 4px; padding: 10px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; display: block; height: 1em; text-align: center; border: 2px solid #fafafa; width: 100px;
}
.tooltip { position: absolute; height: 2em; width: 100%; background-color: #fafafa; color: #444; display: none; border-radius: 4px; left: 0; top: -3em; padding-top: .5em; box-sizing: border-box;
}
.tooltip::after { content: ''; position: absolute; bottom: -10px; left: 45%; width: 0; height: 0; border-style: solid; border-width: 10px 10px 0 10px; border-color: #fafafa transparent transparent	transparent;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <span id="tooltipme">Hello!</span> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

JQuery Tooltip Plugin - Script Codes CSS Codes

body { background: #314963; font-family: 'Helvetica Neue', 'Arial', sans-serif;
}
#tooltipme { color: #fafafa; border-radius: 4px; padding: 10px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; display: block; height: 1em; text-align: center; border: 2px solid #fafafa; width: 100px;
}
.tooltip { position: absolute; height: 2em; width: 100%; background-color: #fafafa; color: #444; display: none; border-radius: 4px; left: 0; top: -3em; padding-top: .5em; box-sizing: border-box;
}
.tooltip::after { content: ''; position: absolute; bottom: -10px; left: 45%; width: 0; height: 0; border-style: solid; border-width: 10px 10px 0 10px; border-color: #fafafa transparent transparent	transparent;
}

JQuery Tooltip Plugin - Script Codes JS Codes

(function ($) { $.fn.tooltip = function(text) {	this.append('<span class="tooltip">' + text + '</span>'); };
}(jQuery));
$('#tooltipme').tooltip('I am a tooltip!');
$('span').hover(function(){ $(this).children('.tooltip').toggle();
});
JQuery Tooltip Plugin - Script Codes
JQuery Tooltip Plugin - Script Codes
Home Page Home
Developer James Podles
Username jpod
Uploaded November 23, 2022
Rating 3
Size 2,968 Kb
Views 12,144
Do you need developer help for JQuery Tooltip Plugin?

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!

James Podles (jpod) Script Codes
Name
Adaptive Text Color
Envelope Email Form
Movie Marathon Calculator
SoundCloud CoverFlow
Stack of Cards
Band Name Generator
Scrambled City
Reading Progress Bar
Document Width Display
A Pen by James Podles
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!