Create a custom a tag with simple jquery + CSS. The title prompt tooltip_HTML/Xhtml _ webpage creation is displayed.

This article mainly introduces how to create a custom a tag title prompt tooltip with simple jquery + CSS. If you need a tooltip, refer to the introduction below.

Create a custom a tag title prompt with simple jquery + CSS to replace the default browser behavior.



Javascript code

The Code is as follows:

$ (Function (){
$ ("A [title]"). each (function (){
Var a = $ (this );
Var title = a. attr ('title ');
If (title = undefined | title = "") return;
A. data ('title', title)
. RemoveAttr ('title ')
. Hover (
Function (){
Var offset = a. offset ();
$ ("
"). AppendTo ($ ("body" registry.html(title).css ({top: offset. top +. outerHeight () + 10, left: offset. left +. outerWidth () + 1 }). fadeIn (function (){
Var pop = $ (this );
SetTimeout (function () {pop. remove () ;}, pop. text (). length * 80 );
});
},
Function () {$ ("# anchortitlecontainer"). remove ();}
);
});
});

Don't forget to reference JQuery.

SetTimeout (function () {pop. remove () ;}, pop. text (). length * 80) is calculated based on the length of the title, used to prevent too short title prompt too long or too long title prompt too short.

CSS code

 
The Code is as follows:
 
# Anchortitlecontainer {
Position: absolute;
Z-index: 5999;
Border: solid 1px # 315B6C;
Padding: 5px;
Color: # 315B6C;
Background: none repeat scroll 0 0 # FFFFFF;
Border-radius: 5px;
Display: none;
}
# Anchortitlecontainer: before {
Position: absolute;
Bottom: auto;
Left:-1px;
Top:-15px;
Border-color: transparent # 315B6C;
Border-style: solid;
Border-width: 15px;
Content :"";
Display: block;
Width: 0;
}
# Anchortitlecontainer: after {
Position: absolute;
Bottom: auto;
Left: 0px;
Top:-13px;
Border-color: transparent # FFFFFF;
Border-style: solid;
Border-width: 15px;
Content :"";
Display: block;
Width: 0;
}

Use some CSS3 features to avoid using images.

I am not a CSS guru. It takes some time to bring up this style. If someone can use it, it would be my pleasure. :)