60002148 Tooltip in vdWeb library

Article 60002148
Type Wish
Product WebJS
Version 6027
Date Added 2/17/2014 12:00:00 AM
Fixed (2/26/2014 12:00:00 AM)
Submitted by Steve Smith


We would like to have tooltip functionality in vdWebLibrary.


in 6028 version, a new ToolTip property was added to the web library's vdraw object. Through this property full functionality of the tooltip can be accessed.
The user can use the show() and hid() functions.

This function takes 4 parameters. The first two are mandatory.

Array point: point is a 3 element array where the position of the tooltip is defined, in View coordinates.
string text: The text to be displayed in the tooltip.
int fontSize: -Optional- The size of the text in pixels. If not defined or null, 12 is used by default.
int timeout: -Optional- The timeframe after which the tooltip will disappear, in milliseconds. If not defined or null, the tooltip won't go away until hide() or show are called.

When this function is called, the tooltip shown will disappear.


function _vdmousemove(e) {
    var entity = e.target.GetEntityFromPoint(e.xPix, e.yPix);
    var p = e.target.WorldToView(vdgeo.newpoint(e.x, e.y, e.z));
    if (entity != null && entity._t != undefined && entity.BoundingBox) 
        e.target.ToolTip.show(p, e.target.Fig_codeToString(entity._t) + " : " + entity.HandleId.toString(), 12, 1500);
Example 2: Display tooltip with an offset relative to mouse position
function _vdmousemove(e) {
            if (e.mousebutton !== 0) return; //button is pressed
            if (!e.target.ActiveAction().IsStarted()) {//if no user action is active
                var entity = e.target.GetEntityFromPoint(e.xPix, e.yPix);
                if (entity != null && entity._t != undefined && entity.ToolTip) {
                    var offsetXInPixels = 5; //move upper left toolip rect 5 pixels right
                    var offsetYInPixels = -15;//move upper left toolip rect 15 pixels down
                    var posInView = e.target.PixelToView([e.xPix + offsetXInPixels, e.yPix + offsetYInPixels, 0]);
                    var tooltipHeightInPixels = 16;
                    var toolTipDelayTime = 1500; //in milliseconds
                    e.target.canvas.style.cursor = "pointer";
                    e.target.ToolTip.show(posInView, entity.ToolTip, tooltipHeightInPixels, toolTipDelayTime);
                } else {
                    e.target.canvas.style.cursor = "crosshair";

You should keep in mind that using the tooltip together with the ActionDrawEntities() function could prove problematic and should be avoided.

Send comments on this topic.