preventOverflow flag to offset tooltips to stay within viewport #953
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR fixes #649 and in some sense fixes #952.
I initially tried the second or third approach outlined in #952, but realized that it would be difficult to actually use Popper.js.
createPopper
requires a DOM element to anchor the tooltip to, and in some uses of bootstrap-slider, there isn't a tick associated with the position being tooltipped. We could create an artificial tooltip position DOM element to give tocreatePopper
, but I instead tried a fourth approach:preventOverflow
manually.This achieves the goal of no dependencies, adding a fairly small amount of code for nice functionality, hidden within a new
preventOverflow
option. I didn't change the defaults because it would break a lot of tests and backward compatibility, but happy to change.I did not implement flip yet, mainly because I care about it less. I could work on it if desired.
I've gotten this working well in my project (via
npm link
), which uses left-to-right horizontal sliders and always-shown tooltips. Here are some screenshotsI should mention that the logic I implemented is much simpler than Popper's
preventOverflow.js
which seems to be mainly dealing with the case of clipping to the nearestdisplay: fixed
ancestor. I opted to just clip towindow
. There may be some subtleties I'm missing.As this is my first contribution, I could use some guidance on how to test more thoroughly/broadly, and these PR requests:
grunt test
in your Terminal within the bootstrap-slider repository directory