In previous chapter, we created the file that will get the desired description for each item.
Now, we'll work with the main file: list_items.php: This file will show a list of item names and, when the user hovers over the item, the tooltip (obtained from item_details.php using AHAH) will be shown next to it.
In this chapter, we shall add the recordset to list all item, the basic layout and the required CSS:
- Open a new php file, save it as 'list_items.php'.
- Create a recordset to list all your items: This step should be already know by DW users, so we shall omit all the proccess. It should return, at least, both the item id (to pass it to item_details.php) and the item name (to be shown to the user):
- In the document body, add this code to create two divs:
<div class="itemTooltip" id="divDynamicID">I am the tooltip </div>
Item name goes here
(At this point, its important that you use 'divDynamicID' as id for the nested div. You'll learn the reason later)
- Time for CSS: Open the CSS panel and add a new style: Select the 'Class' radiobutton and call it 'listItem'. You can save it in the document or save it to a css file:
This style should at least have this properties (you can add more to modify its appearance):
- Repeat this step for the 'itemTooltip' div. In this case, the CSS settings will be:
After this step, the tooltip div will remain hidden by default.
- Drag and drop 'item name' (or the name of the field you are going to show the users) from your bindings panel and replace with it the 'item goes here' fragment in the 'listItem' div.
- Select the 'listItem' div and wrap it using the 'Repeat Region' Server behavior. When you have finished, you should have something like this:
- If you use Live Data View, you will see the items displayed in a single column: