JavaScript|CSS: Core - working with CSS and JavaScript
Part of the code library.
JavaScript|CSS code library snippets listed by subject.
Tooltips: a selection of methods to produce standard and custom tooltips. |
|
1. |
Tooltips. Plain options without JavaScript: use of 'title', <span> and 'style' and the <abbr> and <acronym> elements. Using <span> and 'style' to create standard dotted underline text decoration for tooltips. Setting to cursor image to question mark on hover with 'cursor:help'. |
2. |
Custom tooltip using JavaScript with CSS. Using the getElementByID() method and the 'event' object. Positioning the tooltip relative to the cursor, but non IE browsers will not recognise clientX and clientY tooltip positioning. Hence number 3...next. |
3. |
Custom tooltip using just pure CSS. Adapting the characteristics of the anchor <a> element to create a cool tooltip positioned relative to the anchor. Grouping the tooltip styles together in a style block or in separate style sheet. Separation of the content of the tooltip from the styles: a neat solution. Including images in tooltip content. More customised content possible. |
4. |
Custom tooltip using JavaScript with CSS. Adaption of snippet 2 used on a <division> element, where positioning of the tooltip is less critical. |
Show and hide regions on the page. |
|
5. |
Region defaults on loading to 'show' incase user has JavaScript disabled. |
6. |
Hide and show a navigation menu. A variation on snippet 5 to produce collapsible, expandable menu navigation. |
Adding style to the output from a JavaScript function. |
|
7. |
Add style to JavaScript output. Styling the text output from a JavaScript function when written to the page. |
| Suggest a code snippet to add to this page. | |
Back to top.
Copyright © 2006-2012 justfigures.co.uk
