Load() Remy sharp's b:log. Tooltip Plugins and Tutorials. If you are looking to give your readers the option of a little bit more information or optional extra navigation, a great solution is to use Tooltips.
Tooltips are a “common graphical user interface element, that are used in conjunction with a cursor, usually a mouse pointer. The user hovers the cursor over an item, without clicking it, and a small box appears with extra information regarding the item being hovered over” (via Wikipedia). To give your tooltip extra functionality and versatility the best and simplest solution is using Javascript, especially jQuery.
In this post we have collected 25 of the best jQuery Tooltip Plugins and Tutorials to help with your next project. qTip – The jQuery Tooltip Plugin View DemoSource BeautyTips, a jQuery Tooltip Plugin View DemoSource jQuery Tooltip – Tooltips done right View DemoSource Prototip 2 – Create Beautiful Tooltips with Ease View DemoSource jGrowl View DemoSource Simpletip – A simple jQuery Tooltip Plugin View DemoSource jQuery plugin EZPZ Tooltip. Web Design, Development, and Business - Build Internet! Sliding Boxes and Captions with jQuery.
Add an extra layer of information to your images with sliding boxes.
This is now a plugin! Check out the announcement post for the Mosaic jQuery plugin. Check the project page for the latest release notes and features! The Basic Idea All of these sliding box animations work on the same basic idea. Confused? From this basic idea we can play around with animations of the sliding element to either show or cover up the viewing area, thus creating the sliding effect. Step 1 – CSS Foundation Work Given the basic structure outlined in the helpful image above, we will need to use a little bit of CSS to make it work as intended. The following defines the viewing window (.boxgrid) and sets the default position for images within it to the top left. If you aren’t using the semi-transparent captions you are done with CSS – move to Step 2. Opacity that plays nice in all browsers is a rough topic, educate yourself if you need to. Now we’ll need to set up the default starting point for the caption box.
How to Create a Simple News Ticker. In this tutorial we’ll be looking at how we can transform some semantic and accessible underlying HTML into an attractive and functional news ticker that smoothly scrolls its contents.
Some news tickers are horizontal and some are vertical; the one that we’re going to create today will be vertical. The context of the example is a news scroller so we’ll be working with plain text, but we should be able to put whatever we wanted into the underlying mark-up; images, or links, or whatever. We’ll be using jQuery as the underlying JS library, and a little HTML and CSS. Let’s make a start. The Underlying HTML In a new page in your text editor add the following code: Save this as simpleTicker.html in a directory containing jQuery 1.3.2. On the page is the content that we’ll progressively enhance into the news ticker; it’s made up of a simple definition-list element, which feels appropriate for our purposes. Providing Default Styling Progressively Enhancing the Ticker Starting and Stopping Fixing IE.