bootstrap-slider
bootstrap-slider copied to clipboard
seiyria
Change rollover element that fires tooltip
It would be nice if the tool-tip event was only fired when hovering over the slider bar or handles and not when hovering over the location where the tooltip shows up. This is causing the tool-tip to open when I'm trying to select other controls that are placed above the slider.
Having the same issue. The tooltip appears when I am trying to choose values in a multi select positioned above the slider.
I have this issue as well. Maybe someday I can contribute a PR, but the bulk of my project is in Clojure, and I am pulling in just enough Javascript to create a basic web interface, so I hope someone else may be able to do so before me—I have no idea where to even begin researching this issue.
As an aside, I love what this slider has given me in terms of features and appearance.
Ok, after confirming that other tooltips in Bootstrap don’t behave this way, I couldn’t help looking a little bit at the source, and I think I understand the problem: The tooltip is created as part of the sliderElem, and when the tooltip-related event handlers are being set up, that whole sliderElem has mouseenter and mouseleave event handlers bound to it to show and hide the tooltip. So to fix it, the tooltip should be kept separate from the sliderElem structure, and inserted separately into the document. I am not sure what else that might break, however; for example, is there code to remove the slider? If so it would need to be updated to remove both the slider and the tooltip which have become separate entities.
+1.
You'd only want the tooltip to show when dragging and / or hovering the slider, not when hovering the area that the slider tooltip itself occupies. Real annoying with multiple sliders next to each other
I gave up on trying to fix this, since CSS and Javascript are not my core areas of expertise, and just had to disable the tooltips entirely.
👍 This is definitely required!!
For now, I am just using a workaround with z-indexes, example:
/* for element above/below/left/right of the slider, give a higher z-index */
.element-above {
z-index: 2;
margin-bottom: 10px; /* Modify this depending upon design, and whether tooltip overflows, see comment below */
}
/* Also make sure that there is enough space between the two, so that the z-index workaround works! i.e the tooltip has some padding, and if the tooltip overflows this "element-above", then it will seem that the workaround doesn't work */
/* reduce the default tooltip z-index (but only for bootstrap-slider,
so use a container elements class) */
.give-the-container-a-class .tooltip {
z-index: 1;
}
/* increase the default tooltip z-index when the tooltip is shown,
i.e has the "in" class */
.give-the-container-a-class .tooltip.in {
z-index: 3;
}
@brunchboy try this!
I will look at the source if time permits...
I am traveling internationally at the moment but will try your suggestion when I return, thanks!
@andreaslarssen hey, was pretty busy with stuff, missed your comment, sorry! I have created a fiddle for the workaround, check: https://jsfiddle.net/bool_dev/99qfx8ey/
Remember that there should be enough space between the elements, for the workaround to work.