Latest web development tutorials

jQuery UI API - tooltip box member (Tooltip Widget)

category

Widgets (Widgets)

usage

Description: customizable, themable tooltip box, replace the native tooltip box.

New version: 1.9

Tooltip box (Tooltip) replaced the native tooltip box, so that they can theming, also allows various customizations:

  • Display not only the title of the other content, just as footnotes or inline by Ajax to retrieve additional content.
  • Custom targeting, for example, centered on the element tooltip box.
  • Add additional styles to customize the appearance of a warning or error region.

A default gradient animation to show and hide tooltip box, compared with the simple switching the visibility of such an appearance more spiritual. This can show and hide customization options.

items and content options need to keep pace. If you change one, you will need to change the other.

In general, disabled elements will not trigger any DOM events. Therefore, an appropriate tool to control the balloon disabled element is not possible, because we need to listen to events to determine when to show and hide tooltip box. This leads to jQuery UI can not guarantee support for the disabled element attached to the tool tip box at any level. This means that if you need to be prompted for the disabled elements, you may need to use a mixture of native and jQuery UI balloon tooltip box.

Theming

Tooltip box member (Tooltip Widget) using jQuery UI CSS framework to define the look and feel of its style. If you need to use the specified tooltip style box, you can use the following CSS class name:

  • ui-tooltip : tooltip box outer container.
    • ui-tooltip-content : tooltip box content.

rely

Additional information

  • The part requires some functional CSS, otherwise it will not work. If you create a custom theme, use the widget specified CSS file as a starting point.

Examples

Use all the elements with the title attribute of the event broker, to create a tool tip box (Tooltip) on the document. 

<! Doctype html>
<Html lang = "en">
<Head>
  <Meta charset = "utf-8">
  <Title> tooltip box member (Tooltip Widget) Demo </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.10.2.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
</ Head>
<Body>
 
<P>
  <a href="#" title="锚描述"> anchor text </a>
  <Input title = "Input Help">
</ P>
<Script>
  $ (Document) .tooltip ();
</ Script>
 
</ Body>
</ Html>