Simple Tooltip prompt instance for WordPress

[Add additional code: throw the following code to the topic's functions. php file <? Php?> . For details, search for/view the WordPress function add_shortcode]

// [Tooltip tip = ""]
Add_response code ('tooltip ', 'response code _ tooltip ');
Function required code_tooltip ($ attrs, $ content = null ){
$ Return = '';
Extract (export code_atts (array (
'Tip '=> "",
), $ Attrs ));
Ob_start ();?>
<Span class = "tooltip"> <span class = "tooltip-icon">? </Span> <span class = "tip-content"> <span class = "tip-content-inner"> <? Php echo $ tip;?> </Span>
<? Php
$ Return = ob_get_clean ();
Return $ return;
}

[Then css]

. Tooltip {
Position: relative;
Display: inline-block;
Margin-left: 5px;
Margin-right: 5px;
Height: 16px;
Line-height: 16px;
Vertical-align: middle;
}
. Tooltip-icon {
Display: block;
Width: 14px;
Height: 14px;
Line-height: 14px;
Border: 1px solid #999;
Border-radius: 50%;
Font-size: 12px;
Font-weight: 700;
Font-family: "caption", Arial;
Text-align: center;
}
. Tip-content {
Z-index: 999999;
Display: none;
Position: absolute;
Left:-5px;
Bottom: 30px;
Width: 240px;
}
. Tip-content-inner {
Position: absolute;
Bottom: 0;
Left: 0;
Display: block;
Width: auto;
Max-width: 200px;
Padding: 10px;
Line-height: 20px;
Border: 1px solid # ccc;
Background: # fff;
Line-height: 20px;
Color: #333;
Font-size: 16px;
}
. Tip-content-inner: before {
Content :"";
Position: absolute;
Left: 7px;
Bottom:-24px;
Border-style: solid;
Border-color: # ccc transparent;
Border-width: 12px 6px;
}
. Tip-content-inner: after {
Content :"";
Position: absolute;
Left: 8px;
Bottom:-20px;
Border-style: solid;
Border-color: # fff transparent;
Border-width: 10px 5px;
}
. Tooltip: hover>. tip-content {
Display: block;
}

-PS0: the circle is implemented with css3, so the circle under IE8 will become a box ...... If you need to support IE8, change it to the background image.
-PS1: The tip content uses two containers to display the tip content with the width: auto effect, that is. the width of tip-content is max-width, and then. tip-content-inner has a property effect similar to max-width (Er, OK ?? Close? Br/>
[Usage]

In the article editor, you only need to enter the short code in the following format:
[Tooltip tip = "prompt content"]

There will be something like this: the enclosed question mark

The question mark enclosed by the mouse hover will display the prompt content: Demo

Is it easy.