1.Basics of Using the Tooltip 2.Using Any HTML Inside the Tooltip

Total Page:16

File Type:pdf, Size:1020Kb

1.Basics of Using the Tooltip 2.Using Any HTML Inside the Tooltip 1.Basics of using the tooltip HTML coding You need two things: the elements that show the tooltips when the cursor is placed on top of them, these elements are called triggers. You also need one or more tooltip elements. In this setup we have a single tooltip element that works for all of the triggers: <!-- elements with tooltips --> <div id="demo"> <img src="image1.jpg" title="The tooltip text #1"/> <img src="image2.jpg" title="The tooltip text #2"/> <img src="image3.jpg" title="The tooltip text #3"/> <img src="image4.jpg" title="The tooltip text #4"/> </div> JavaScript coding Tooltip activation starts by selecting the trigger elements with jQuery. Here we select all img tags that have a title attribute and are nested inside an element with id demo. We supply one argument for the tooltip initialization call which is a jQuery selector to the tooltip element. $("#demo img[title]").tooltip(); The default behaviour is that the tooltip is positioned on the top/center of the trigger and it slides upwards. Of course, the positioning and the sliding effect can be altered in the configuration as will be seen in the upcoming demos. Enclosing your call inside $(document).ready executes the script right after the document is scriptable. Read more about that in the User's Manua 2.Using any HTML inside the tooltip Tooltip content can be any HTML, not just plain text. Move your mouse over the Download button and you'll see a tooltip that contains an image, table and a link element. You can also see the slide effect in action. You have enough time to move your cursor away from the trigger element and place it on top of the link that is contained inside the tooltip. You can also customize this delay from the tooltip configuration. Note that if the trigger has a title attribute then the manual tooltip won't be displayed because the title attribute overrides the manual tooltip. HTML code We have two things: a trigger element - which is the download button and the tooltip. By default, this tool assumes that the tooltip is placed right after the trigger element. As you can see we have a regular DIV element working as the tooltip container and it can contain anything as opposed to the simple title attribute in the previous demo. <!-- trigger element. a regular workable link --> <a id="download_now">Download now</a> <!-- tooltip element --> <div class="tooltip"> <img src="http://static.flowplayer.org/img/title/eye.png" alt="Flying screens" style="float:left;margin:0 15px 20px 0" /> <table style="margin:0"> <tr> <td class="label">File</td> <td>flowplayer-3.2.7.zip</td> </tr> <tr> <td class="label">Date</td> <td>2011-03-03</td> </tr> <tr> <td class="label">Size</td> <td>112 kB</td> </tr> <tr> <td class="label">OS</td> <td>all</td> </tr> </table> <a href="/3.2/">What's new in 3.2</a> </div> CSS coding The tooltip is styled with these settings. In this example we are using a black-arrowed background image. The important thing to notice here is that you have all the power of CSS when "skinning" the tooltip. You can change the background settings, colors, borders and fonts, etc. /* trigger button */ #download_now { background:transparent url(/img/home/download.png) no-repeat scroll 0 0; display:block; height:44px; margin-bottom:30px; overflow:hidden; text-indent:-999em; width:159px; cursor:pointer; } /* mouseover state */ #download_now:hover { background-position:0 -44px ; } /* clicked state */ #download_now:focus { background-position:0 -88px; } /* tooltip styling */ .tooltip { display:none; background:url(http://static.flowplayer.org/tools/img/tooltip/black_ar row_big.png); height:163px; padding:40px 30px 10px 30px; width:310px; font-size:11px; color:#fff; } /* a .label element inside tooltip */ .tooltip .label { color:yellow; width:35px; } .tooltip a { color:#ad4; font-size:11px; font-weight:bold; } JavaScript code We select the trigger element with the #download_now selector. If we had chosen to use a class name instead of an ID, we could select multiple triggers from the page and all of them would use the element that is positioned after the trigger as the tooltip. $("#download_now").tooltip({ effect: 'slide'}); Note: the slide effect is not included in the standard jQuery Tools distribution. You must download a custom combination that includes this effect. 3.Imitating browsers default tooltip The first two images show the browser's default tooltip and the last two show the jQuery Tools tooltip. We are trying to mimic the standard browser behaviour. So what is the point of all this? First of all we have a similar syntax for enabling both of the tooltips. Browsers without JavaScript enabled will always see the default tooltip. Secondly, the browser's tooltip is not always the best one. Here are the main benefits of the jQuery Tools tooltip which cannot be achieved with the browser's default tooltip: Appearance and dimensions can be tweaked. The tooltip can contain any HTML element. You have full control over the positioning. You can move the cursor on top of the tooltip so you can use links or forms inside of them. You can control the delay in showing or hiding the tooltip before and after your mouse moves over the trigger element. You can change the show/hide effect. Everything is scriptable and you can even make your own tooltip plugins. HTML/CSS coding Our HTML structure is identical to the basic setup. Here we have a single tooltip element and this is how it has been styled: .tooltip { display:none; background-color:#ffa; border:1px solid #cc9; padding:3px; font-size:13px; -moz-box-shadow: 2px 2px 11px #666; -webkit-box-shadow: 2px 2px 11px #666; } Note: we are using a drop shadow for the latest browsers, i.e. the latest versions of Firefox, Safari, Konqueror and Chrome JavaScript coding A single JavaScript call initializes the tooltip. The configuration options are commented: $("img[title]:gt(1)").tooltip({ // use div.tooltip as our tooltip tip: '.tooltip', // use the fade effect instead of the default effect: 'fade', // make fadeOutSpeed similar to the browser's default fadeOutSpeed: 100, // the time before the tooltip is shown predelay: 400, // tweak the position position: "bottom right", offset: [-50, -80] }); Enclosing your call inside $(document).ready executes the script right after the document is scriptable. Read more about that in the User's Manual. 4.Using tooltips in form fields Here you can see a tooltip when you put your focus on any of the following form fields. You can move between fields with your keyboard (using the TAB key) or with your mouse. HTML coding Here is our HTML structure. Each tooltip is specified in the title attribute of each form element: <form id="myform" action="#"> <h3>Registration Form</h3> <div id="inputs"> <!-- username --> <label for="username">Username</label> <input id="username" title="Must be at least 8 characters."/><br /> <!-- password --> <label for="password">Password</label> <input id="password" type="password" title="Try to make it hard to guess." /><br /> <!-- email --> <label for="email">Email</label> <input id="email" title="We won't send you any marketing material." /><br /> <!-- message --> <label for="body">Message</label> <textarea id="body" title="What's on your mind?"></textarea><br /> <!-- message --> <label for="where">Select one</label> <select id="where" title="Select one of these options"> <option>-- first option --</option> <option>-- second option --</option> <option>-- third option --</option> </select> <br /> </div> <!-- email --> <label> I accept the terms and conditions <input type="checkbox" id="check" title="Required to proceed" /> </label> <p> <button type="button" title="This button won't do anything">Proceed</button> </p> </form> This form has minimal CSS styling and you can see it by looking at the standalone page's source code. CSS coding Here is our tooltip "skin". Everything is pure CSS without any images or background images: /* simple css-based tooltip */ .tooltip { background-color:#000; border:1px solid #fff; padding:10px 15px; width:200px; display:none; color:#fff; text-align:left; font-size:12px; /* outline radius for mozilla/firefox only */ -moz-box-shadow:0 0 10px #000; -webkit-box-shadow:0 0 10px #000; } JavaScript coding All tooltips are enabled with the following configuration. If you want to customize the events when the tooltip is shown, then you should read about event management from the tooltip documentation. // select all desired input fields and attach tooltips to them $("#myform :input").tooltip({ // place tooltip on the right edge position: "center right", // a little tweaking of the position offset: [-2, 10], // use the built-in fadeIn/fadeOut effect effect: "fade", // custom opacity setting opacity: 0.7 }); 5.Using tooltips in tables or lists Here is a table with multiple rows. Move your mouse over the delete icons on the right hand side of the table and you'll see an example of the same tooltip for multiple triggers. HTML coding We have only one tooltip element and multiple triggers. Each row has a delete.png image which is configured to work as a trigger for our tooltip element. Note that we don't have any title attribute on the triggers so we can use the same content inside the tooltip for every trigger. <!-- same tooltip for each entry --> <div id="tooltip" class="tooltip"> Remove this row. </div> <table> <tr> <th scope="row" abbr="Model" class="spec">1956 Melbourne</th> <td>Leonid Spirin (URS)</td> <td>Antanas Mikenas (URS)</td> <td>Bruno Junk (URS)</td> <td><img src="table/delete.png" /></td> </tr> <!-- other rows --> </table> JavaScript code Each tooltip is configured with this one JavaScript snippet. We have specified a tip configuration option that will select the tooltip element that is being used by all of the triggers.
Recommended publications
  • Designing and Deploying an Information Awareness Interface
    Designing and Deploying an Information Awareness Interface JJ Cadiz, Gina Venolia, Gavin Jancke, Anoop Gupta Collaboration & Multimedia Systems Team Microsoft Research One Microsoft Way, Redmond, WA 98052 {jjcadiz; ginav; gavinj; anoop} @microsoft.com ABSTRACT appeal to a broader audience. Although the ideas and The concept of awareness has received increasing attention lessons generated by such prototypes are valuable, they over the past several CSCW conferences. Although many leave a critical question: Why did these prototypes fail to awareness interfaces have been designed and studied, most provide users with substantial value relative to cost? What have been limited deployments of research prototypes. In combination of features, design, and process will help an this paper we describe Sideshow, a peripheral awareness application succeed in establishing a healthy user interface that was rapidly adopted by thousands of people in population? our company. Sideshow provides regularly updated Sideshow started as one more idea for an interface designed peripheral awareness of a broad range of information from to provide users with peripheral awareness of important virtually any accessible web site or database. We discuss information. Rather than concentrate on a specific Sideshow’s design and the experience of refining and awareness issue, the research team set out to incorporate a redesigning the interface based on feedback from a rapidly range of features into a versatile and extensible system for expanding user community. dynamic information awareness that could be easily Keywords deployed, extended by third parties, and quickly evolved in Situational awareness, peripheral awareness, awareness, response to users’ experiences. computer mediated communication, information overload What happened was something akin to an epidemic within 1 INTRODUCTION our company.
    [Show full text]
  • Bforartists UI Redesign Design Document Part 2 - Theming
    Bforartists UI redesign Design document part 2 - Theming Content Preface...........................................................................................................................6 The editor and window types......................................................................................7 Python console.............................................................................................................8 Layout:................................................................................................................................................................8 The Console Window.........................................................................................................................................8 Menu bar with a menu........................................................................................................................................8 Dropdown box with icon....................................................................................................................................9 RMB menu for menu bar....................................................................................................................................9 Toolbar................................................................................................................................................................9 Button Textform..................................................................................................................................................9
    [Show full text]
  • Spot-Tracking Lens: a Zoomable User Interface for Animated Bubble Charts
    Spot-Tracking Lens: A Zoomable User Interface for Animated Bubble Charts Yueqi Hu, Tom Polk, Jing Yang ∗ Ye Zhao y Shixia Liu z University of North Carolina at Charlotte Kent State University Tshinghua University Figure 1: A screenshot of the spot-tracking lens. The lens is following Belarus in the year 1995. Egypt, Syria, and Tunisia are automatically labeled since they move faster than Belarus. Ukraine and Russia are tracked. They are visible even when they go out of the spotlight. The color coding of countries is the same as in Gapminder[1], in which countries from the same geographic region share the same color. The world map on the top right corner provides a legend of the colors. ABSTRACT thus see more details. Zooming brings many benefits to visualiza- Zoomable user interfaces are widely used in static visualizations tion: it allows users to examine the context of an interesting object and have many benefits. However, they are not well supported in by zooming in the area where the object resides; labels overcrowded animated visualizations due to problems such as change blindness in the original view can be displayed without overlaps after zoom- and information overload. We propose the spot-tracking lens, a new ing in; it allows users to focus on a local area and thus reduce their zoomable user interface for animated bubble charts, to tackle these cognitive load. problems. It couples zooming with automatic panning and provides In spite of these benefits, zooming is not as well supported in an- a rich set of auxiliary techniques to enhance its effectiveness.
    [Show full text]
  • Veyon User Manual Release 4.1.91
    Veyon User Manual Release 4.1.91 Veyon Community Mar 21, 2019 Contents 1 Introduction 1 1.1 Program start and login.........................................1 1.2 User interface...............................................2 1.3 Status bar.................................................2 1.4 Toolbar..................................................3 1.5 Computer select panel..........................................3 1.6 Screenshots panel............................................4 2 Program features 7 2.1 Using functions on individual computers................................7 2.2 Monitoring mode.............................................8 2.3 Demonstration mode...........................................8 2.4 Lock screens...............................................9 2.5 Remote access..............................................9 2.6 Power on, restart and shutdown computers............................... 11 2.7 Log off users............................................... 12 2.8 Send text message............................................ 12 2.9 Run program............................................... 13 2.10 Open website............................................... 13 2.11 Screenshot................................................ 14 3 FAQ - Frequently Asked Questions 15 3.1 Can other users see my screen?..................................... 15 3.2 How frequently are the computer thumbnails updated?......................... 15 3.3 What happens if I accidentally close the Veyon Master application window?.............. 15 3.4
    [Show full text]
  • Bootstrap Tooltip Plugin
    BBOOOOTTSSTTRRAAPP TTOOOOLLTTIIPP PPLLUUGGIINN http://www.tutorialspoint.com/bootstrap/bootstrap_tooltip_plugin.htm Copyright © tutorialspoint.com Tooltips are useful when you need to describe a link. The plugin was inspired by jQuery.tipsy plugin written by Jason Frame. Tooltips have since been updated to work without images, animate with a CSS animation, and data-attributes for local title storage. If you want to include this plugin functionality individually, then you will need tooltip.js. Else, as mentioned in the chapter Bootstrap Plugins Overview, you can include bootstrap.js or the minified bootstrap.min.js. Usage The tooltip plugin generates content and markup on demand, and by default places tooltips after their trigger element. You can add tooltips in the following two ways: Via data attributes : To add a tooltip, add data-toggle="tooltip" to an anchor tag. The title of the anchor will be the text of a tooltip. By default, tooltip is set to top by the plugin. <a href="#" data-toggle="tooltip" title="Example tooltip">Hover over me</a> Via JavaScript : Trigger the tooltip via JavaScript: $('#identifier').tooltip(options) Tooltip plugin is NOT only-css plugins like dropdown or other plugins discussed in previous chapters. To use this plugin you MUST activate it using jquery readjavascript. To enable all the tooltips on your page just use this script: $(function () { $("[data-toggle='tooltip']").tooltip(); }); Example The following example demonstrates the use of tooltip plugin via data attributes. <h4>Tooltip examples for anchors</h4> This is a <a href="#" title="Tooltip on left"> Default Tooltip </a>. This is a <a href="#" data-placement="left" title="Tooltip on left"> Tooltip on Left </a>.
    [Show full text]
  • Maplex Tutorial
    Maplex Tutorial Copyright © 1995-2010 Esri All rights reserved. Maplex Tutorial Table of Contents Introduction to the Maplex tutorial . 3 Exercise 1: Enabling Maplex for ArcGIS and adding the Labeling toolbar . 4 Exercise 2: Labeling the parcels with their serial and parcel numbers . 9 Exercise 3: Labeling the parcel boundaries with their length . 17 Exercise 4: Labeling the streets with their names . 24 Copyright © 1995-2010 Esri. All rights reserved. 2 Maplex Tutorial Introduction to the Maplex tutorial Introducing the Maplex tutorial A good way to learn how to use ESRI's Maplex for ArcGIS is to work through the process of labeling a map. This tutorial introduces you to some labeling techniques in the context of mapping land parcels and streets. In this tutorial, you will use Maplex for ArcGIS to do the following: • Improve labels for parcel features by stacking and reducing the size of the labels. • Place labels for parcel boundary features by aligning them to their features and reducing their size. • Improve label placements for street features by applying a labeling style and an abbreviation dictionary. Tutorial data The exercises in this tutorial use the tutorial data distributed with Maplex for ArcGIS. The default installation location of the data is C:\ArcGIS\ArcTutor\Maplex. In this tutorial • Exercise 1: Enabling Maplex for ArcGIS and adding the Labeling toolbar • Exercise 2: Labeling the parcels with their serial and parcel numbers • Exercise 3: Labeling the parcel boundaries with their length • Exercise 4: Labeling the streets with their names Copyright © 1995-2010 Esri. All rights reserved. 3 Maplex Tutorial Exercise 1: Enabling Maplex for ArcGIS and adding the Labeling toolbar Imagine that you work for a small city and you need to make a map for the Complexity: Beginner assessor.
    [Show full text]
  • Supply Chain Packaging Guide
    Secondary Packaging Supply Chain Standards July 7, 2021 Business Confidential | ©2021 Walmart Stores, Inc. 177 // 338 Secondary Packaging Supply Chain Standards - Update Summary These standards have included multiple clarifications of what is required and what is NOT ALLOWED. These changes have been updated throughout the published standards to provide clarity to suppliers. The pages have been reorganized to provide a better flow. PAGE 2021 UPDATES Changes to Supply Chain Standards 185 SQEP Phase 2 and Phase 3 Defect Description/Definitions Added 202 General Case Markings Updated for Dates, Unprocessed Meats, and Cylindrical Items 210-213 Updated Pallet Standards 218 Update "Palletized Shipments" to "Unitized Shipments" 227 Add Inbound Appointment Scheduling Standard 228 Update TV Test Standards 235-237 Add Direct Store Delivery (DSD) aka Direct To Store (DTS) Standards 239 Update SIOC Standards 240 Add eCommerce Product Specific Requirement Standards 241-244 Add Drop Ship Vendor (DSV) Standards 268 Add Jewelry Distribution Center Standards 269-271 Add Optical Distribution Center Standards 275 Add Goods Not For Resale (GNFR) Standards 277-278 Update Meat/Poultry/Seafood Case and Pallet Label Standards 284 Add HACCP Pallet Placard for GCC Shipments 311-312 Add Frozen Seafood Carton Marking Requirements Appendix D Update Receiving Pulp Temperature Range Business Confidential | © 2021 Walmart Stores, Inc. The examples shown are for reference only. Supply Chain Standards 178 // 338 Table of Contents Supply Chain Stretch Wrap . 219 Produce Shipments . 280 Contact Information . 179 Trailer Loading . 220 Automated Grocery Handling . 281 Walmart Retail Link Resources . 180 Trailer Measurements. 221 Grocery Import Distribution Center (GIDC) . 282 Walmart Distribution Center Overview .
    [Show full text]
  • Getting Started with Arcgis: Labeling Features in Arcmap
    Getting Started with ArcGIS Labeling Features in ArcMap By Monica Pratt, ArcUser Editor A label is any text that identifies a feature on a map and helps the map reader interpret a map. In ArcMap, you can use labeling or annota- tion to identify features. The choice of annota- tion or labeling depends on how much control you need over text display and how you would like to store text in ArcMap. See “Labeling Options in ArcMap,” another article in this issue, for a discussion of the pros and cons of each method for identifying features. If you are using labeling, the features you will label will depend on the type of data being displayed and how the map will be used. These considerations will help you decide which labeling method to use in a given sit- uation. You can use the Text tool to label a few features, or you can take advantage of the functionality built into ArcMap to label fea- tures—interactively or dynamically—based on attribute data associated with a layer. Labels can be added without referencing an attribute table by using the Text tool. One by One 7. To adjust the position of a label, place Although a value stored in an attribute table the cursor over the label, hold down the field typically supplies the information for a left mouse key, and drag the label to a new label (e.g., the name Angola could be a value location. for a field that contains the names of coun- tries), labels can be added without referencing Label Specific Features an attribute table by using the Text tool.
    [Show full text]
  • Quick Start Guide
    Quick Start Guide Running chemlab.exe from Windows 7/Vista/XP 1. Click the Windows Start button, and then point to Programs. 2. Select the ChemLab program in the ChemLab program group. 3. When ChemLab starts pick a simulation module to load from the simulation dialogbox. 4. When a simulation is started the list of available chemicals, available lab equipment and lab text, Introduction, Procedures & Observations, will change to reflect the current simulation. 5. Read the lab introduction in the introduction text window. 6. Select the procedure tab above the text window and read the procedure. 7. Then perform the lab following the steps in the procedure. 8. Record your observations in the observation text window. 9. Save your lab results in the lab file by selecting File Menu: “Save” or “Save As” Menu option. Adding Equipment: Lab equipment is added to the Lab window by either selecting it from the toolbar, equipment menu, right mouse context popup menu, or additionally lab equipment can also be added through the chemicals dialog box by specifying a new lab container. Adding Water: Water is added to a selected lab item by using either the toolbar water button or the water dialog box. To open the water dialog box, select the water menu item in the chemicals menu or the water menu item with the right-mouse-button context menu. Water may also be added through the Chemicals dialog box. The toolbar button will incrementally add water to the next graduation in the selected container. The users may also add ice water; which is used to create ice baths.
    [Show full text]
  • Attribute Tooltip and Images Live Demo
    Attribute Tooltip and Images Live Demo Attribute Tooltip and Images Installation/User Guide Support Attribute Tooltip and Images Live Demo Installation Process: Note: Please take a backup of your all Magento files and database before installing or updating any extension. Extension Installation: Download the Attribute Tooltip and Images .ZIP file from the Magento account. Log in to the Magento server (or switch to) as a user, who has permission to write to the Magento file system. Create folder structure /app/code/Solwin/attribute-tooltip-image/ to your site root directory Extract the contents of the .ZIP file to the folder you just created Navigate to your store root folder in the SSH console of your server: Run upgrade command as specified : php bin/magento setup:upgrade Run deploy command as specified : php bin/magento setup:static- content:deploy -f Clear the cache either from the admin panel or command line php bin/magento cache:clean Now, you can see the Solwin menu in the admin panel. Please go to Solwin -> Attribute Tooltip And Image -> Configuration and select Enable to Yes. Change/Set all other options as per your requirements and save settings. Overview: The Attribute Tooltip and Images extension for Magento 2 adds a custom tooltip to the attributes for the Magento website. The tooltip can display as text and/or image. The Attribute Tooltip and Images extension for Magento 2 provides an option to show an image for an individual attribute. Once the store owner enables the “Visible on Product View Page on Front-end” option then the attributes tooltip image displays on the product detail page.
    [Show full text]
  • Chapter 13 GUI Programming
    Chapter 13 GUI Programming COSC 1436 Fall, 2016 Nov 16, 2016 Hong Sun Graphical User Interfaces • What is a GUI • –A graphical user interface allows the user to interact with the operating system and other programs using graphical elements such as icons, buttons, and dialog boxes. • Event-Driven • –GUI program must respond to the actions of the user. The user causes events to take place, such as the clicking of a button, and the program must respond to the events. • Using the tkinter Module The tkinter stands for “TK interface” Allows you to create simple GUI programs. Use import tkinter sentence Tkinter • The only GUI packaged with Python itself • Based on Tcl/Tk. Popular open-source scripting language/GUI widget set developed by John Ousterhout (90s) • Tk used in a wide variety of other languages (Perl, Ruby, PHP, etc.) • Cross-platform (Unix/Windows/MacOS) • It's small (~25 basic widgets) Basic tkinter Widgets a component of an interface Typical steps in using Tkinter • You create and configure widgets (labels, buttons, sliders, etc.) • You pack them (geometry) • You implement functions that respond to various GUI events (event handling) • You run an event loop The Big Picture • A GUI lives in at least one graphical window • Here it is.... an empty window (no widgets) • This window is known as the "root" window • Usually only one root window per application Root(Main) Window • To create a new root window: • Import tkinter main_window=tkinter.Tk() • To start running the GUI, start its loop main_window.mainloop() • mainloop() function runs like an infinite loop until you close the main window.
    [Show full text]
  • Compulink Business Systems, Inc | 1100 Business Center Circle | Thousand Oaks, CA 91320 | 800.888.8075 Support@Compulinkadvantag
    Enhancements to the Compulink-owned Ophthalmology Advantage EHR Screens in Version 11.0.5.3 Efficiency and Visual Cues: 1. Encounter Favorites (New). a. Complaint tab (PopUpComplaint) – Blur/Cataract and Conjunctivitis. b. Posterior tab – DME OD, OS and OU. 2. Encounter Favorite Stars were added to the following Tabs/Layouts. a. Biomicroscopy tab i. Adnexa PopUp (pencil) – PopUpAdnexa. ii. Conjunctiva PopUp (pencil) – PopUpConjunctiva. iii. Cornea PopUp (pencil) – PopUpCornea. b. CLDiag tab (Contact Lenses) - PopUpCLDiagnostic c. Complaint tab (Complaint History) - PopUpComplaint d. Testing Summary tab (Testing) – PopUpTest e. Botox tab (Botox / Fillers) – PopUpCosmetic f. Encounter Favorite Stars added to ASC tabs are be listed in the ASC Screen Changes section below. 3. New Label Hover History Feature. a. Hover or click on bold labels in the exam to display historical values for the associated data fields. b. Hover fields were added to the following Compulink-owned tabs. i. Hover History for Visual Acuity will display the Uncorrected and Corrected Distance Visual Acuity right and left. 1. CL Check tab. 2. Lasik Post Op tab. 3. Objective, Objective/Refraction, Objective/Test and Objective (Tablet) tabs. 4. Pediatrics tab. 5. Post Op tab. ii. Hover History for Dilation. 1. Anterior (Style 1), Anterior (Style 2), Anterior (Style 3), Anterior (Tablet), and Anterior/Posterior tabs. 2. Biomocroscopy tab. 3. Extended Ophthalmoscopy and Extended Ophthalmoscopy Pink tabs. 4. Gonioscopy tab. iii. Hover History for Size/Ratio, defining C/D size and IOP for right and left. 1. Extended Ophthalmoscopy and Extended Ophthalmoscopy Pink. 2. Posterior (Style 1), Posterior (Style 2), and Posterior (Tablet) tabs. 4.
    [Show full text]