Creating a javascript driven tooltip in Software Paint PDF 417 in Software Creating a javascript driven tooltip

How to generate, print barcode using .NET, Java sdk library control with example project source code free download:
Creating a javascript driven tooltip using none todeploy none on web,windows application iReport for Jasper Server Tooltips a none for none re useful UI elements to help give the end-user additional contextual information about a design element. HTML provides a title attribute which will show a text string when the user hovers, but it cannot be styled and is limited in length. To overcome these limitation, YUI has built the Tooltip widget extended from the Overlay container.

This recipe will show you how to use YUI to add Tooltips to your web application.. Getting ready... In the pre none for none vious recipes of this chapter, we included the container_core.js file, but that only contains the logic for the Module and Overlay containers. You will need to include the following JavaScript to use the remaining containers:.

<script src="build/yahoo-dom-event/yahoo-dom-event.js" type="text/javascript"></script> <script src="build/container/container-min.js" type="text/javascript"></script>.

10 . Additional ly, you will probably want to include the following CSS to inherit all the built in YUI styles:. <link rel="stylesheet" type="text/css" href="build/container/assets/skins/sam/container.css"/> When inclu ding container.css you will need to apply the class yui-skin-sam to the body or an ancestor element of your containers:. <body class="yui-skin-sam"> Lastly, we will use the following image as the context element for the tooltips in this recipe:. <img id="myContextId" src="blank.gif" title="My tooltip text"/> How to do it... Here is ho none none w to instantiate a basic Tooltip for the image, using the Img element"s title attribute as text:. var myTool tip = new Tooltip("myTooltipId", { context: "myContextId" });. You can sp none for none ecify your own text by using the text property:. var myTool tip = new Tooltip("myTooltipId", { context: "myContextId", text: "I like this text better!" });. If there a none for none re a group of elements that can share the same Tooltip, you can pass in an array of elements as the context:. var myTool tip = new Tooltip("myTooltipId", { context: ["myContextId", "myContext2Id", "myContext3Id"] });. The follow none none ing list is the default configuration for a Tooltip:. var defaul tTooltipConfig = { text: null, context: null, // but required container: document.body, preventoverlap: true, showdelay: 200, hidedelay: 250,. Using the Container Component autodismis sdelay: 5000, disabled: false, xyoffset: [0, 25], visible: false, // this overrides Module default containtoviewport: true // this overrides Overlay default };. There are none none three new CustomEvents available on Tooltips:. function l ogEvent(e, fireValues) { YAHOO.log(e + " from " + fireValues[0].id); } myTooltip.

subscribe("contextMouseOut", logEvent); myTooltip.subscribe("contextMouseOver", logEvent); myTooltip.subscribe("contextTrigger", logEvent);.

If display none for none ing your Tooltip is conditional on some logic, you can prevent the Tooltip from showing by returning false in a contextMouseOver subscriber:. myTooltip. subscribe("contextMouseOver", function() { var showTooltip = false; /* some logic that updates showTooltip */ return showTooltip; });. How it works... A Tooltip is a very simple Overlay, containing only the body portion of the Module. A Tooltip should not be created from markup, only through JavaScript. It is automatically rendered when instantiated and will be appended directly to the Body element, unless otherwise specified.

The first argument of the constructor function is the id of the Tooltip, and the second is the configuration properties, just like other containers. Keep in mind that if the id already exists in the page, then the Tooltip will system will commender that element and replace it with its content. Unlike other containers, there is one required property, the context, which should point to one or more elements that need a Tooltip.

The Tooltip container overrides the behavior of the context property, so it does not behave like the same property in other containers. Additionally, the default value for the visible property is changed to false and constraintoviewport is changed to true. By default, the Tooltip container will use the title attribute of the element as the text for the Tooltip.

You can override this behavior by specifying the text property. The follow table shows the new properties available on Tooltip containers:. 10 . Property text context container preventoverlap showdelay hidedelay autodismissdelay Default null null document.body TRUE 200 250 5000 Explanatio n A string value to display as the Tooltip"s text. References to the element or elements that should trigger the displaying of the Tooltip on mouseover. A reference to the container element that the Tooltip"s markup should be rendered into.

A boolean specifying if the Tooltip should be prevented from overlapping its context element. A number indicating the milliseconds to wait before showing the Tooltip on mouseover. A number indicating the milliseconds to wait before hiding the Tooltip after mouseout.

A number indicating the milliseconds to wait before automatically dismissing the Tooltip when the Tooltip is visible and the mouse does not move. A boolean specifying if the Tooltip should be shown when mousing over the context element. A two value array, indicating the number of pixels to offset the Tooltip from the mouse position when shown.

The first index is the x-axis and the second is the y-axis offset..
Copyright © . All rights reserved.