Configuration

In this article you will find the detailed list of properties that you can use inside the constructors of message boxes and tooltip to adjust their configuration.

Message Box

Related sample: Message. Show Message

The constructor of a message box may take the following parameters:

text - (string) required, the text of a message box
icon - (string) optional, an icon from the used icon font
css - (string) optional, the style of a message box
html - (string) optional, the HTML content to be displayed in a message box
Related sample: Message. Message With Html Content
node - (HTMLELement|string) optional, the container for a message box or its id
position - (string) optional, the position of a message box:"top-left"|"top-right"|"bottom-left"|"bottom-right"
Related sample: Message. Message Container
expire - (number) optional, the time period of displaying a message box before it disappears, in ms

dhx.message({
    text:"Message text", 
    icon:"dxi-clock", 
    css:"expire", 
    expire:1000
});

Alert Box

Related sample: Message. Show Alert

The constructor of an alert box may take the following parameters:

text - (string) required, the text of an alert box
header - (string) optional, the text of an alert box header
css - (string) optional, the style of an alert box
buttons - (array) optional, an array with the name of the alert button. By default, the button's name is "Apply"
buttonsAlignment - (string) optional, the position of buttons:"left"|"center"|"right"
blockerCss - (string) optional, the style of blocking the window when an alert box appears

dhx.alert({
    header:"Alert Header",
    text:"Alert text",
    buttonsAlignment:"center"
});

Confirm Box

Related sample: Message. Show Confirm

The constructor of a confirm box may take the following parameters:

text - (string) required, the text of a confirm box
header - (string) optional, the text of a confirm box header
css - (string) optional, the style of a confirm box
buttons - (array) optional, an array with the names of the confirm buttons. By default, the buttons' names are "Apply" and "Reject"
buttonsAlignment - (string) optional, the position of the button: "left"|"center"|"right"
blockerCss - (string) optional, the style of blocking the window when a confirm box appears

dhx.confirm({
    header:"Confirm Header",
    text:"Confirm text",
    buttons:["decline", "accept"],
    buttonsAlignment:"center"
});

Working with confirm

To find out which button was pressed, use the callback function that returns a Promise:

dhx.confirm({
    header: "confirm the action",
    text: "can you apply?",
    buttons: ["apply", "cancel"]
}).then(function(answer){
    if (answer){
        console.log("confirmed")
    }
    else {
        console.log("cancelled")
    }
});

Tooltip

Related sample: Message. Show Tooltip

The constructor of a tooltip may take the following parameters:

node - (HTMLELement|string) required, the target of tooltip or its id
position - (string) optional, the position of a tooltip:"right", "bottom", "center"
css - (string) optional, the style of a tooltip box
force - (boolean) optional, forces opening of a tooltip
showDelay - (number) optional, the time period that should pass before showing a tooltip, in ms
hideDelay - (number) optional, the time period that should pass before hiding a tooltip, in ms

dhx.tooltip("Tooltip From Right", {
    node: "fourth", 
    position: "right"
});

Smart positioning

If the target of the tooltip is placed close to some edge of the browser, the tooltip will be shown from the opposite side of the target.

In the image below the target is adjacent to the right side of screen. Its tooltip that has the position:"right" attribute in the config object appears from the left side of the target.

Smart positioning

Tooltip API

You can control the activity of the Tooltip via the pair of methods.

to switch the tooltip off, use the disableTooltip() method:

dhx.disableTooltip();

to switch the tooltip on again, apply the enableTooltip() method:

dhx.enableTooltip();