TaskTooltip

Displays a tooltip when hovering a task. By default the tooltip displays:

  • task name
  • task column
  • task swimlane (if using swimlanes)
  • names of assigned resources (if any)

Task tooltip
//<code-header>
fiddle.title = 'Task tooltip';
//</code-header>
const taskBoard = new TaskBoard({
    appendTo : targetElement,

    features : {
        columnToolbars : false,
        taskTooltip    : true
    },

    // Swimlanes to display
    swimlanes : [
        'high',
        'low'
    ],

    swimlaneField : 'prio',

    columns : [
        'todo',
        'doing',
        'done'
    ],

    columnField : 'status',

    project : {
        tasks : [
            { id : 1, name : 'Hover me', status : 'doing', prio : 'high' },
            { id : 2, name : 'Follow up', status : 'done', prio : 'low' },
            { id : 3, name : 'Adjust ads', status : 'doing', prio : 'low' },
            { id : 4, name : 'Spring campaign', status : 'todo', prio : 'low' }
        ]
    }
});

To customize the contents, supply your own template:

Task tooltip template
//<code-header>
fiddle.title = 'Task tooltip template';
//</code-header>
const taskBoard = new TaskBoard({
    appendTo : targetElement,

    features : {
        columnToolbars : false,
        taskTooltip    : {
            template({ taskRecord }) {
                return `
                    <span style="color : #aaa">#${taskRecord.id}</span>
                    ${taskRecord.name}
                `;
            }
        }
    },

    columns : [
        'todo',
        'doing',
        'done'
    ],

    columnField : 'status',

    project : {
        tasks : [
            { id : 1, name : 'Easter campaign', status : 'doing' },
            { id : 2, name : 'Follow up', status : 'done' },
            { id : 3, name : 'Adjust ads', status : 'doing' },
            { id : 4, name : 'Spring campaign', status : 'todo' },
            { id : 5, name : 'Survey', status : 'todo' }
        ]
    }
});

This feature is disabled by default.

Configs

11

Common

disabledInstancePlugin
listenersEvents

Other

template: function

Function used to populate the tooltip, supply your own to override the default contents of the tooltip.

const taskBoard = new TaskBoard({
    features : {
        taskTooltip : {
            template({ taskRecord }) {
                return `<b>${taskRecord.name}</b>`
            }
        }
    }
});
ParameterTypeDescription
tipDataObject
tipData.taskRecordTaskModel

Hovered task

tipData.columnRecordColumnModel

The task's column

tipData.swimlaneRecordSwimlaneModel

The task's swimlane (if used)

Returns: String | DomConfig -

Return an HTML string or a DOM config object

tooltip: TooltipConfig

Tooltip config object used to override the defaults, see Tooltip#configs for available configs.

const taskBoard = new TaskBoard({
    features : {
        taskTooltip : {
            tooltip : {
                hoverDelay : 100,
                hideDelay  : 500
            }
        }
    }
});
catchEventHandlerExceptionsEvents

Misc

bubbleEventsEvents
callOnFunctionsEvents
clientInstancePlugin
localeClassLocalizable
localizableLocalizable
localizablePropertiesLocalizable

Properties

16

Common

disabledInstancePlugin

Class hierarchy

isTaskTooltip: Boolean= truereadonly
Identifies an object as an instance of TaskTooltip class, or subclass thereof.
isTaskTooltip: Boolean= truereadonlystatic
Identifies an object as an instance of TaskTooltip class, or subclass thereof.
isEventsEvents
isInstancePluginInstancePlugin
isLocalizableLocalizable
isTaskBoardFeatureTaskBoardFeature

Lifecycle

configBase
isConstructingBase
isDestroyedBase
isDestroyingBase

Misc

callOnFunctionsEvents
clientInstancePlugin
localeHelperLocalizable
localeManagerLocalizable

Other

catchEventHandlerExceptionsEvents

Functions

28

Configuration

applyDefaultsstaticBase

Events

detachListenersBase

Lifecycle

constructBase
constructorBase
destroystaticBase
doDestroyBase
setConfigBase

Misc

animatePropertyBase
callbackBase
doDisableInstancePlugin
downloadTestCaseBase
initClassstaticBase
isOfTypeNamestaticBase
mixinstaticBase
optionalLstaticLocalizable
resolveCallbackBase
updateLocalizationLocalizable

Other

addListenerEvents
hasListenerEvents
LstaticLocalizable
onEvents
relayAllEvents
removeAllListenersEvents
removeListenerEvents
resumeEventsEvents
suspendEventsEvents
triggerEvents
unEvents

Events

5
beforeDestroyEvents
catchAllEvents
destroyEvents
disableInstancePlugin
enableInstancePlugin

Event handlers

5
onBeforeDestroyEvents
onCatchAllEvents
onDestroyEvents
onDisableInstancePlugin
onEnableInstancePlugin

Typedefs

1

CSS variables

4