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

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
  • position - (string) optional, the position of a message box:"top-left"|"top-right"|"bottom-left"|"bottom-right"
  • expire - (number) optional, the time period of displaying a message box before it disappears, in ms
  • node - (HTMLELement|string) optional, the container for a message box or its id
dhx.message({
    text:"Message text", 
    icon:"dxi-clock", 
    css:"expire", 
    expire:1000
});

Alert Box

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

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

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