2. Connect wz_tooltip.js to the HTML file.
Copy the following row to the body section, preferably immediately following the on-tab <body>.
<SCRIPT type = "text/JavaScript" src = "wz_tooltip.js"> </SCRIPT>
If necessary, change the path src = "wz_tooltip.js" to a Javascript file. Note: Do not forcibly link the downloaded wz_tooltip.js file to my website (walterzorn website.
4. Select: convert HTML elements to the tooltip
To use text directly in the tooltip, you can identify specific HTML elements to convert them to the tooltip. This is beneficial in some ways.
? You can have something very important in the toolbar, And the HTML content of a page (not javascript content) is beneficial to the Web search engine.
? If appropriate, the content is still visible to users who have disabled JavaScript.
? Similarly, HTML elements can be displayed all the time. For example, if you want to display the content in the tooltip of different places.
? In this way, you can easily define HTML elements and directly convert them into complex HTML in The tooltip, which is much easier than JavaScript strings.
To define a tooltip created with HTML, you only need to pass the ID of the desired HTML Tag through the tiptotip () function. Example:
<A href = "index.htm" onmouseover = "tagtotip ('span2')" onmouseout = "untip ()"> Home page </a>
...
<Span id = "span2"> This is some comment <br> about my home page </span>
In this example, The tooltip on the Link displays the content crawled from the <span> element. Note that only the internal content including the line feed label will be copied, and the span label itself and any layout above it will not be copied.
Tooltip when the page is being read
Library automatically hides HTML elements converted to tooltip (for example, <span> elements in the preceding example ). To hide automatically hide me
The global tool of wz_tooltip.js prompts that the tagstotip variable is set to false in the configuration file (default value: true ).
If you like it, you can also set the CSS 'display' attribute to 'None' to hide these HTML elements from the row.
On the other hand, note: especially in IE, disabling the auto-hide feature will achieve better page reading and display effects.
5. html In The tooltip
To use an image in a tooltip, you must specify the width and height attributes in the label. This allows the script to accurately measure the size of the tooltip.
Work
Double quotation marks in the prompt text must be written in the form of HTML characters (& quote;), because double quotation marks have been used as onmouseover
Event Handler definition characters, and cannot be nested. The marker (single quotation mark) must be escaped with a forward slash, because the marker has been used as a definition character for the tooltip text. HTML in tooltip text
Label attribute definition characters, you can use & quot; or \'. For example:
Correct:
<A href = "index.htm"
Onmouseover = "tip ('text with Width = \ '60 \ '> image.') "onmouseout =" untip () "> homepage </a>
Or
<
Href = "index.htm" onmouseover = "tip ('text with Src = & quot; pics/image.jpg & quot;
Width = & quot; 60 & quot;> image. ') "onmouseout =" untip () ">
Homepage </a>
Error:
<A href = "index.htm"
Onmouseover = "tip ('text with Width = "60"> image. ') "onmouseout =" untip () "> homepage </a>
6. tooltip in CSS format
The CSS class can be used to easily convert the tooltip text in the Div or span element. You can make the title text the same (for how to define the tooltip title, see the title command description in the following command reference ). Example:
... Onmouseover = "tip ('<Div class = & quot; tipcls1 & quot;> text of tooltip Number One </div> ')"...
... Onmouseover = "tip ('<SPAN class = \ 'tipcls2 \'> text of tooltip Number Two </span> ')"...
... Onmouseover = "tip ('tooltip number 3', title, '<Div class = \ 'titlecls \'> some title </div> ')"...
7. Get the tooltip content through variable or function call
Is
Instead of ending the string with single quotes, tip () can well accept variables defined elsewhere or call a function, such as the <SCRIPT> block or a separate JS
File. This corresponds ()
The commands are the same (see the commands listed below ). Because the content or format of a tooltip can be dynamically created every time it is to be displayed.
Example:
<HTML>
<Head>
...
<SCRIPT type = "text/JavaScript">
VaR txt1 = "this is the text of the first tooltip ";
Function tooltiptxt (N)
{
Return "this is the text of the" + N + "tooltip ";
}
</SCRIPT>
</Head>
<Body>
<SCRIPT type = "text/JavaScript" src = "wz_tooltip.js"> </SCRIPT>
...
<A href = "a.htm" onmouseover = "tip (txt1)" onmouseout = "untip ()"> link 1 </a>
...
<A href = "B .htm" onmouseover = "tip (tooltiptxt ('second')" onmouseout = "untip ()"> link 2 </a>
...
<A href = "c.htm" onmouseover = "tip (tooltiptxt ('third')" onmouseout = "untip ()"> link 3 </a>
...
</Body>
</Html>
8. Use commands to customize tool prompts
All
The default configuration is valid for all tool prompts. You can change it in the Javascript file, which is located in the global tooltip configuration.
. To configure the tooltip separately, you can use the commands listed below. These independent commands override the global configuration in wz_tooltip.js. They can use
The onmouseover event handler's tip () or tagtotip () function is passed. Each Command must contain values separated by commas:
Onmouseover = "tip ('some text', above, true )"
Or
Onmouseover = "tagtotip ('someid', titlefontcolor, '# ccffcc ')"
Multiple commands form a comma-separated command-Value Pair list. Command Order does not matter. Example:
Onmouseover = "tip ('some tooltip text', shadow, true, title, 'some title', padding, 9 )"
? The above tool prompts you to move the cursor down. Value: true or false.
? Bgcolor indicates the background color. Value: HTML color, which is enclosed in single quotes, such as '# d3e3f6', 'darkcyany', or an empty string.
? Bgimg background image.
? Bordercolor border color. Value: HTML color.
? Borderstyle border style. Value: CSS border style.
? Borderwidth indicates the Border width. Value: The value is greater than or equal to 0. The default value is 1.
? The centermouse is located in the middle of the tooltip.
? Clickclose close the tooltip when you click the mouse in the tooltip or document. Value: true or false.
? When a clicksticky user clicks the trigger tooltip element, the tooltip is still displayed.
? Closebtn displays the close button in the title bar. Value: true or false.
? The color of the closebtncolors close button. Array, including the background color, text color, highlighted background color when the mouse moves up, and highlighted text color when the mouse moves up. For example, ['', '#66ff66', 'white', '# 00cc00'].
? Closebtntext close button text. For example, 'click me '.
? Copycontent is only valid for tagtotip (), indicating whether to copy HTML elements to the tooltip. If it is false, it indicates moving. If it is copied, the input values are kept.
? Display tooltip for delay latency. Milliseconds. Value: value> = 0.
? The tooltip for how much duration latency is hidden. Milliseconds.
? Exclusive only displays other tooltip after the current tooltip is hidden. Value: true or false.
? Fadein is gradually displayed, which is not supported by some browsers. Value: value> = 0.
? Fadeout is gradually hidden, which is not supported by some browsers. Value: value> = 0.
? Fix (mode 1) A tooltip is displayed in the fixed [x, y] coordinates, for example, [230,874].
? Fix
Type 2) display tooltip on any HTML element, even in another tooltip .... Onmouseover = "tip ('some text ',
Fix, ['purplespan ', 0, 5]) "... <span id =" purplespan "> HTML Element
To show the tooltip on </span>
? Followmouse follows the mouse. Value: true or false.
? Fontcolor font color.
? Fontface font name.
? Fontsize font size. Value: the size of the unit.
? Fontweight font is increased. Value: 'normal' or 'bold '.
? The height of the tooltip. Value: any value.
? If jumphorz is true, the tool prompts you to jump to the other side of the horizontal direction when you touch the edge of the window.
? If jumpvert is true, the tool prompts you to jump to the other side of the vertical direction when you touch the edge of the window.
? Left is displayed on the left of the mouse pointer. Value: true or false.
? The horizontal offset of offsetx over the mouse pointer.
? Offsety vertical offset on the mouse pointer.
? Opacity transparency. Value: 0-, 0 completely transparent.
? Padding of the padding tooltip. Value: value> = 0.
? Whether or not shadow is shadow.
? Shadowcolor shadow color.
? Shadowwidth shadow size. Value: value> = 0.
? The sticky tooltip stops at its initial position until another tooltip is triggered. Value: true or false.
? Textalign text arrangement.
? Title: displays the title bar. Value: Title text.
? Text arrangement of titlealign titles.
? Titlebgcolor title background color.
? Titlefontcolor title Font color.
? Titlefontface title Font Name.
? Titlefontsize the title Font size. Value: the size of the unit.
? The padding of the tlepadding title. Value: value> = 0.
? Width: the width of the tooltip. Value: any value.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
