ToolTip: Difference between revisions

From NSB App Studio
Jump to navigation Jump to search
(Created page with "file:tooltip.png == Description == The List control is used a menu list. Each line can have a name, a number and an image. Selecting one will call <ListID>_onclick(i), w...")
 
 
(11 intermediate revisions by the same user not shown)
Line 1: Line 1:
[[file:tooltip.png]]
[[file:tooltip1.png]]    [[file:tooltip2.png]]


== Description ==
== Description ==


The List control is used a menu list. Each line can have a name, a number and an image. Selecting one will call <ListID>_onclick(i), with i containing the line number chosen. To get the text of the list item that was called,use the expression List_jqm1.children[''i''].innerText in your onclick function.
The ToolTip control is used to display a quick message to the user. If the icon is tapped on, the message displays. The user can then dismiss it. The width of the control is defined in the properties. The height is set automatically, depending on the text to be displayed.


To add a control to your app, choose the control’s icon in the Toolbar, then position it on the Design Screen. Use the Property Editor to set the properties you need, then add functions to your code to respond to the events that come from the control: usually, just onclick..
When using AppStudio 4 with jQuery Mobile 1.4 on old Android devices (Android OS 2.x), the built in icons will not appear. To fix this, add the following to the manifest property of your project. If your button uses theme 'b', change 'white' to 'black'.
<pre>
  nsb/images/icons-png/user-white.png
</pre>


== Properties ==
== Properties ==
Line 12: Line 15:
{| class="wikitable"
{| class="wikitable"
|-
|-
| dividers || Is the item a divider? Comma separated list of Y and N. Design time.
| data-transition || What animation effect should the popup show with? Choice of 10.
|-
|-
| dividerTheme || Which theme should all the dividers have? A-z. Design time
| message || The message which appears when the mouse is over the icon. Could be something like "Learn more". Does not do anything on touchscreen devices.
|-
|-
| images || Image file names for each line, comma separated. Design time
| popupmsg || The message which appears when the icon is clicked. Can be formatted HTML.
|-
|-
| imageStyle || None, 16x16 or 80x80. Design time
| tipWidth || The width of the tip. Can be in pixels (100px) or a percent of screen width (50%).
|-
| items || List of item names, comma separated.Items can be plain text or HTML. Design time
|-
| showNumbers || Show numbers to the left of each item. True/false. Design time
|-
| getItem(''i'') || Returns the text of item ''i''.
|-
| getItemCount() || Returns the number of of items. Runtime.
|-
| deleteItem(''all'') || Delete all items. With no argument, just the last item is deleted. Runtime.
|-
| addItem(''text'', ''img'', ''n'', ''header'') || Add a new item at postion ''n'' with ''text'' and ''img''. ''text'' can be html. Runtime. If ''header'' is true, the line appears as a heading. Only ''text'' is required.
|-
| replaceItem(''n'', ''text'', ''img'') || Replace item ''n'' with new ''text'' and optional ''img''. Runtime.
|-
| refresh() || Redraw list after updating. Runtime.
|}
|}


Line 43: Line 30:
== Example ==
== Example ==


To change the text of the tooltip at runtime, do the following:
<pre>
<pre>
Function List1_onclick(i)
    ToolTip1_popupInfo.innerHTML = "My new text"  
  If TypeName(i)="object" Then Exit Function
  MsgBox "Menu item chosen: " & i & " " & List1.getItem(i)
End Function
</pre>
 
Items can be formatted using HTML:
 
<pre>
List1.addItem("<table><tr><td width=30>1</td><td width=200>Beschreibung</td><td>19.99</td></tr></table>")
</pre>
</pre>


You can change the color of the selected item:
To change the text of the hover message at runtime, do the following:
 
<pre>
<pre>
List1.children[i].style.background="yellow"
    ToolTip1.title = "My new message"  
</pre>
</pre>


== Output ==
== Output ==


<pre>
(message box showing “Menu item chosen: 2 Two”)
</pre>


[[Category:Language Reference]]
[[Category:Language Reference]]

Latest revision as of 14:18, 9 May 2014

Description

The ToolTip control is used to display a quick message to the user. If the icon is tapped on, the message displays. The user can then dismiss it. The width of the control is defined in the properties. The height is set automatically, depending on the text to be displayed.

When using AppStudio 4 with jQuery Mobile 1.4 on old Android devices (Android OS 2.x), the built in icons will not appear. To fix this, add the following to the manifest property of your project. If your button uses theme 'b', change 'white' to 'black'. 

  nsb/images/icons-png/user-white.png

Properties

Standard properties are supported, plus:

data-transition What animation effect should the popup show with? Choice of 10.
message The message which appears when the mouse is over the icon. Could be something like "Learn more". Does not do anything on touchscreen devices.
popupmsg The message which appears when the icon is clicked. Can be formatted HTML.
tipWidth The width of the tip. Can be in pixels (100px) or a percent of screen width (50%).

Events

Standard events are supported. However, events are not usually associated with the control.

Example

To change the text of the tooltip at runtime, do the following: 

     ToolTip1_popupInfo.innerHTML = "My new text"

To change the text of the hover message at runtime, do the following: 

     ToolTip1.title = "My new message"

Output

Retrieved from "https://wiki.appstudio.dev/index.php?title=ToolTip&oldid=5988"