Use jquery UI to modify the Bubble Floating Box of the title attribute

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/

CompleteCode: Save it to an HTML file.

 <!  Doctype html  >  <  Html  >  <  Head  >  <  Meta  HTTP-equiv  = "Content-Type" Content  = "Text/html; charsets = 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 </  H2  >  <  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  > In general, 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 added: $ (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  = "It can be used to retrieve the password. It is recommended that you enter it. "   /> </  P  >  <  P  > <  A Href  = "Http://www.keleyi.com"  Target  = "_ Blank"  Title  = "Ke leyi Homepage"  > Ke leyi </  A  > 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  > 

 

This article Reprinted from Ke leyi: http://www.keleyi.com/a/bjac/a6d651710217f7a0.htm