By using the tooltip () function of jQuery UI, the floating prompt box is no longer the same. Click here to see the effect first: http://www.keleyi.com/keleyi/phtml/tooltip/
The following is the complete code: Save it to an html file to open it.
Copy codeThe Code is as follows: <! Doctype html>
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> Use jQuery UI to modify the Bubble Floating Box (Tooltip) of the title Attribute-ke leyi </title>
<Script type = "text/javascript" src = "http://www.keleyi.com/keleyi/pmedia/jquery-1.9.1.min.js"> </script>
<Link rel = "stylesheet" href = "http://www.keleyi.com/keleyi/pmedia/jquery/ui/1.10.2/themes/sunny/jquery-ui.min.css"/>
<Script type = "text/javascript" src = "http://www.keleyi.com/keleyi/pmedia/jquery/ui/jquery-ui-1.10.2.custom.min.js"> </script>
<Script type = "text/javascript">
$ (Function (){
$ (Document). tooltip ();
});
</Script>
<Style type = "text/css">
Label {
Display: inline-block;
}
</Style>
</Head>
<Body>
<H2> different floating prompt boxes <P> If the title attribute is added to an element, a floating prompt box is displayed next to the element when the cursor moves over the element. </P>
<P> generally, the floating prompt box cannot be modified by style, but if you use <a href = "http://www.keleyi.com/menu/jquery/" title = "jQuery special effects, materials and other learning content. "Target =" _ blank "> jQuery </a> UI, You can see different effects. The method is very simple: $ (document ). tooltip (); </p> <p> move the cursor over the input box (or hyperlink) to see the effect of the floating prompt box. </P>
<P> <label for = "age"> Email: </label> <input id = "age" title = "can be used to retrieve passwords. We recommend that you enter this parameter. "/> </P>
<P> <a href = "http://www.keleyi.com" target = "_ blank" title = "Ke leyi home"> ke leyi </a> is now style 1 <a href = "http://www.keleyi.com/keleyi/phtml/tooltip/tooltip2.htm "title =" Style 2: redmond "> style 2 </a> <a href =" http://www.keleyi.com/a/bjac/a6d651710217f7a0.htm "target =" _ blank "title =" View Original "> original </a> </p>
</Body>
</Html>
