devextreme
Version:
JavaScript/TypeScript Component Suite for Responsive Web Development
106 lines (105 loc) • 3.44 kB
JavaScript
/**
* DevExtreme (esm/__internal/ui/slider/m_slider_tooltip.js)
* Version: 25.2.5
* Build date: Fri Feb 20 2026
*
* Copyright (c) 2012 - 2026 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
import numberLocalization from "../../../common/core/localization/number";
import $ from "../../../core/renderer";
import Tooltip from "../../ui/m_tooltip";
import {
SliderTooltipPositionController
} from "../../ui/slider/slider_tooltip_position_controller";
const SLIDER_TOOLTIP_VISIBILITY_CLASS = "dx-slider-tooltip-visible-on-hover";
class SliderTooltip extends Tooltip {
_getDefaultOptions() {
return Object.assign({}, super._getDefaultOptions(), {
visible: false,
position: "top",
hideOnOutsideClick: false,
hideTopOverlayHandler: null,
hideOnParentScroll: false,
animation: null,
arrowPosition: null,
templatesRenderAsynchronously: false,
_fixWrapperPosition: false,
useResizeObserver: false,
showMode: "onHover",
format: value => value,
value: 0
})
}
_initMarkup() {
super._initMarkup();
const {
visible: visible
} = this.option();
this._attachToMarkup(visible);
this._toggleShowModeClass()
}
_renderContent() {
super._renderContent();
this._renderContentText()
}
_toggleAriaAttributes() {}
_renderContentText() {
var _this$$content;
const {
value: value,
format: format
} = this.option();
const formattedText = numberLocalization.format(value ?? 0, format);
null === (_this$$content = this.$content()) || void 0 === _this$$content || _this$$content.text(formattedText);
this._renderPosition()
}
_toggleShowModeClass() {
const {
showMode: showMode,
target: target
} = this.option();
const isHoverMode = "onHover" === showMode;
const $sliderHandle = $(target);
$sliderHandle.toggleClass(SLIDER_TOOLTIP_VISIBILITY_CLASS, isHoverMode)
}
_initPositionController() {
this._positionController = new SliderTooltipPositionController(this._getPositionControllerConfig())
}
_attachToMarkup(enabled) {
const {
target: target
} = this.option();
const $sliderHandle = $(target);
if (enabled) {
this.$element().appendTo($sliderHandle)
} else {
this.$element().detach()
}
}
_optionChanged(args) {
const {
name: name,
value: value
} = args;
switch (name) {
case "visible":
this._attachToMarkup(value);
super._optionChanged(args);
break;
case "showMode":
this._toggleShowModeClass();
break;
case "format":
case "value":
this._renderContentText();
break;
default:
super._optionChanged(args)
}
}
updatePosition() {
this._renderPosition()
}
}
export default SliderTooltip;