Scribd
Upload
24 views2 pages

Tool Tips: Tooltips - HTML

This document demonstrates how to add tooltips to elements using jQuery. It includes code to initialize tooltips on document ready using the jQuery tooltip widget. Any element can have a tooltip added by including a title attribute. The title text will display in a box next to the element on hover. Tooltips can also be styled using jQuery UI theme roller. The example shows adding a tooltip to a form field to provide additional context about the field.

Uploaded by

MirunaCatiche
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
24 views2 pages

Tool Tips: Tooltips - HTML

This document demonstrates how to add tooltips to elements using jQuery. It includes code to initialize tooltips on document ready using the jQuery tooltip widget. Any element can have a tooltip added by including a title attribute. The title text will display in a box next to the element on hover. Tooltips can also be styled using jQuery UI theme roller. The example shows adding a tooltip to a form field to provide additional context about the field.

Uploaded by

MirunaCatiche
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

Tool Tips: tooltips.

html
!
!

<!doctype html>
<html>
<head>
<title>jQuery Basics</title>

!
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jqueryui.min.js"></script>

<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://themeroller.com" 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>

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy