How to implement tooltip in a page using javascript?

Question

1.00/5 (1 vote)

See more:

I have a page which has 100's of footnotes and hence i want to implement tooltip for those footnotes i.e footnotes referred in the content has its reference para at the end of document. So I require is that there must be a javascript which pulls the text from the bottom of the document and show as a tooltip to the footlink hovered within the content document. I have just logic but not getting how should I implement.
Paragraph in content where hove is to be done and paragraph of the footnote content is to be displayed.

<p>This is the content part <sup><a name="a" href="#_a">a</a></sup></p>

Bottom part:

<p>This is the footnote part <sup><a name="_a" href="#a">a</a></sup></p>

Posted 16-Feb-15 21:53pm

VipinKumar Maurya

Updated 16-Feb-15 22:28pm

v3

Add a Solution

Comments

jaket-cp 17-Feb-15 4:14am

Can you supply a small example of the html, footnotes and text.
Also any javascript code you may have tired.
Thanks.
Use the "Improve question" link on the bottom left of the question, if you mouse over the question it should display.

VipinKumar Maurya 17-Feb-15 4:27am

I have just figured out what is to be done. I am not getting where to start. I am new to such kind of work.

jaket-cp 17-Feb-15 4:50am

NitishBharadwaj has put in a solution, this should cover you needs.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

NitishBharadwaj · Answer 1 · 2015-02-16T22:30:00

You can use jQuery UI

XML

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Tooltip - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( document ).tooltip();
});
</script>
<style>
label {
display: inline-block;
width: 5em;
}
</style>
</head>
<body>
<p><a href="#" title="That&apos;s what this widget is">Tooltips</a> can be attached to any element. When you hover
the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.</p>
<p>But as it's not a native tooltip, it can be styled. Any themes built with
<a href="http://jqueryui.com/themeroller/" title="ThemeRoller: jQuery UI&apos;s theme builder application">ThemeRoller</a>
will also style tooltips accordingly.</p>
<p>Tooltips are also useful for form elements, to show some additional information in the context of each field.</p>
<p><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes."></p>
<p>Hover the field to see the tooltip.</p>
</body>
</html>