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.
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 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
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
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 "Reject" and "Apply" |
buttonsAlignment | (string) optional, the position of the button: "left", "center", or "right" (by default) |
blockerCss | (string) optional, the style of blocking the window when a confirm box appears |
dhx.confirm({
header:"Confirm Header",
text:"Confirm text",
buttons:["cancel", "apply"],
buttonsAlignment:"center"
});
Related sample: Message. Alert And Confirm Configuration
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: ["cancel", "apply"]
}).then(function(answer){
if (answer){
console.log("confirmed")
}
else {
console.log("cancelled")
}
});
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
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.
You can control the activity of the Tooltip via the pair of methods.
dhx.disableTooltip();
dhx.enableTooltip();
Back to top