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
});

Related sample:  Message. Message Configuration

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"
});

Related sample:  Message. Alert And Confirm Configuration

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"
});

Related sample:  Message. Alert And Confirm Configuration

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"
});

Related sample:  Message. Tooltip Position

Related sample:  Message. Tooltip Delay Configuration

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();
Back to top