Toolbar slider tooltip not visible at top of page

See the attached picture for an example. If the toolbar is at the top of the page, the tooltip is cut off by the browser viewport border. How do you disable the tooltip?


You can manipulate cssstyle for slider tooltip:

div.dhx_toolbar_slider_label_dhx_skyblue { -moz-user-select: none; background-color: #FFE5AD; border: 1px solid #FFB052; color: #000000; cursor: default; font-family: Tahoma; font-size: 10px; font-weight: normal; padding: 0 2px; position: absolute; z-index: 8422; }
Or just disable tooltips:
enableTooltip(false)
docs.dhtmlx.com/doku.php?id=dhtm … bletooltip

The disable method is for dhtmlxslider, but I’m using dhtmlxtoolbar. When I tried to use the enableToolbar(false) line, it said the method didn’t exist.

var ToolBar = MainLayout.attachToolbar(); ToolBar.enableTooltip(false);

I copied the CSS you provided into my site.css file, but it didn’t change anything. I modified it to try to put the tooltip below the slider as follows:

div.dhx_toolbar_slider_label_dhx_skyblue { -moz-user-select: none; background-color: #FFE5AD; border: 1px solid #FFB052; color: #000000; cursor: default; font-family: Tahoma; font-size: 10px; font-weight: normal; padding: 0 2px; position: relative; <---- bottom: -20px; <---- z-index: 8422; }

How do you add the slider?
If you add it with script as

sld = toolbar.addSlider('costs', 33, 150, 0, 100, 30, 'min: 0', 'max: 100', 'slider');

You can apply it by simple way:

sld.enableTooltip(false)

I am adding it with XML.

<item     type="slider"     id="col_size"    length="150"    valueMin="50"    valueMax="200"    valueNow="125" textMin="Data Column Width: "/>

If the only way to disable the tooltip is to add it with javascript, I can do that instead of XML.

Sorry, i dismisled you about sld.enableTooltip(false)
If you add slider to toolbar, you can’t get its object to modify something.
Try the next more features:

toolbar.setItemToolTipTemplate(id,"") 

//it is no matter: xml or js init
Or

div.dhx_toolbar_slider_label_dhx_skyblue { display: none !important; }