seiyria/bootstrap-slider

Bootstrap 4 Compatibility

jeremylynch opened this issue · 45 comments

jeremylynch commented

Tooltips are not working in bootstrap v4 alpha 6.

The HTML for tooltips has changed:

Bootstrap 3 html:

<div class="tooltip top" role="tooltip">
  <div class="tooltip-arrow"></div>
  <div class="tooltip-inner">Tooltip on the left</div>
</div>

Bootstrap 4 html:

<div class="tooltip tooltip-top" role="tooltip">
  <div class="tooltip-inner">Tooltip on the top</div>
</div>

We have three things to change:

  1. .top is now .tooltip-top
  2. .tooltip-arrow has been removed
  3. Change .in to .show

After making these changes my tooltip position was still wrong. I fixed this with:

.tooltip.tooltip-main {
  margin-top: -40px;
}
Shnoulle commented

Maybe, wait for boostrap 4 beta version. alpha is unstable : maybe in was added in some day.

seiyria commented

Would be happy to have a PR that adds these classes to the LESS/SCSS files!

  • 👍6
jeremylynch commented

@seiyria do you think we should just take the bootstrap 3 tooltip SCSS that has been removed in v4 and add it to the bootstrap-slider SCSS?

seiyria commented

It'd probably just be a matter of copying and pasting, yes. We don't want any hard reliance on bootstrap.

natcohen commented

any chance this can be resolved quickly so we can use bootstrap v4?

seiyria commented

Sure, if you submit a PR for it.

  • 👎1
  • ❤️1
taha333taha commented

just add :
.slider.slider-horizontal:hover, .slider.slider-vertical:hover { .tooltip.tooltip-main { opacity: 1 !important; } }

this will fix the problem of tooltip in bootstrap 4

  • 👎5
  • ❤️6
str commented

@taha333taha in my case, the tooltip was too wide. This is the fix I added to my SCSS:

 .slider.slider-horizontal:hover, .slider.slider-vertical:hover {
    .tooltip.tooltip-main {
        opacity: 0.7 !important;
    }
    .tooltip-inner {
        font-size: 90%;
        width: auto;
    }
}
  • 👍10
  • 👎1
str commented

Also, the initial value is showing way to the left:

slider-left

dhanyn10 commented

@seiyria not fixed yet? hey your user still waiting compatibility fix for bootstrap 4 😄

taha333taha commented

@str i moved to Ion range slider , it's better in bootstrap 4 without any errors

  • 👍3
seiyria commented
  • ❤️1
str commented

@seiyria Thank you for your honesty. I'm more of a consumer than a library developer. I don't feel like an expert to make a PR that works for every browser and doesn't break things.

@taha333taha thank you for your comment, I think switching will be better for me

explooosion commented

I use this to fix tooltip-arrow in Boostrap4

.slider.slider-horizontal:hover .tooltip.tooltip-main.top .tooltip-arrow:after,
.slider.slider-vertical:hover .tooltip.tooltip-main.top .tooltip-arrow:after {
  content: '';
  width: 0;
  height: 0;
  position: absolute;
  left: 40%;
  bottom: -10px;
  border: transparent 5px solid;
  border-top: #000 5px solid;
}
  • 👎1
dhanyn10 commented

i'll try to help you for this.

a1russell commented

Bootstrap v4 beta is released as of Aug 10

  • 😄6
rovolution commented

we would very much appreciate a PR around this. thanks!

gabel commented

Bootstrap 4 is final now. Nobody is working on a fix yet?

seiyria commented

Nope, I don't think either of us use this in production so we are in maintenance mode, basically.

ricardo-ribeiro commented

Define this in the css and you should get the tooltip. Still missing the arrow tough.
.in{
opacity: .9;
}

  • 👍8
danfox commented

After a year still no fix... :/

  • 👍1
  • 👎2
  • 😕2
seiyria commented
  • 👎1
  • ❤️4
davidlesieur commented

I have made some work on the Bs4 upgrade. However:

  • It might not work as a pull request, since I have completely removed support for Bs3, and removed LESS compiling in favor of Sass. Bootstrap has moved to Sass, and I'm so used to compile Bootstrap to theme it that I made (perhaps too quickly) the assumption that most Bootstrap users would do the same and therefore not care about LESS...
  • The CSS changes required to correctly display the tooltips feel wrong. These might not be necessary if we made a more "normal" usage of the Tooltips plugin. But there must be good reasons for the current usage, and I did not have time to reconsider it.
  • Tooltips do not display properly with vertical sliders; these would also need CSS tweaks.
  • Some tests are not passing.
  • Those commits should be squashed.
seiyria commented

Yeah, we would not be able to justifiably drop support for bs3, sorry. You're welcome to keep that on a fork though.

moritzvieli commented

In my opinion, bs3-support can also be dropped. @davidlesieur: are you working on a fork or how do you think we can proceed from here?

davidlesieur commented

I'd rather not maintain a fork. In my opinion, support for LESS and Bs3 should be dropped from Bootstrap-Slider, otherwise their burden will effectively harm further development of the project. Perhaps a new major release could be Bs4-only, and minimal support for LESS/Bs3 still given through minor releases from the previous version, if anyone cares. If maintainers @seiyria and @rovolution agreed with that, I could probably wrap a PR.

  • 👍4
rovolution commented

@davidlesieur if you would be interested in taking on this effort, it would be greatly appreciated!!!

davidlesieur commented

@rovolution, adding this task to my schedule next week. Not sure I'll have enough time to fix every test case, but it could be a basis for code review and for getting help by other interested parties.

  • 👍3
rovolution commented

@davidlesieur that would be awesome! yea even some sort of starting point would be great in order to move towards a new major release

bastiantowers commented

Starting from the code that @taha333taha shared here, this will work only when you want your tooltip to work with show or hide values. To make it work in all cases, including also always value, this would be a better "hack":

.slider.slider-horizontal .tooltip.tooltip-main.in,
.slider.slider-vertical .tooltip.tooltip-main.in { opacity: 1 !important; }
  • 👍4
herryswastika commented

Using Sublime, i simply edit bootstrap-slider.js, replace 'in' with 'show', and the tooltip shows up again. Example :
from

this._addClass(this.tooltip, 'in');
this._addClass(this.tooltip_min, 'in');
this._addClass(this.tooltip_max, 'in');

into

this._addClass(this.tooltip, 'show');
this._addClass(this.tooltip_min, 'show');
this._addClass(this.tooltip_max, 'show');
  • 🚀4
gzimmers commented

@herryswastika Can confirm that this worked, though you also need to replace

this._removeClass(this.tooltip, 'in');
this._removeClass(this.tooltip_min, 'in');
this._removeClass(this.tooltip_max, 'in');

To

this._removeClass(this.tooltip, 'show');
this._removeClass(this.tooltip_min, 'show');
this._removeClass(this.tooltip_max, 'show');

So it will disappear after first hover.

jud1 commented

hellow, i have another simple solution in bootstrap 4.

dont use the tooltips from boostrap, use pesudoelement on .slider-handle div:

Example:

.slider-handle::after{
            content: attr(aria-valuenow);
            position: absolute;
            bottom: calc(100% + 0.5em);
            left: 50%;
            transform: translateX(-50%);

            font-size: 0.75em;
            font-weight: 600;
            color: #393f50;
            background-color: white;
            box-shadow: 0px 0px 6px 0px rgba(182, 182, 182, 0.4);

            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 0.3em;
            width: 4em;
            height: 2.5em;
        }

Captura

  • 👍5
  • 🎉1
bguralnik commented

Define this in the css and you should get the tooltip. Still missing the arrow tough.
.in{
opacity: .9;
}
Additionally added these 2 styles to show arrow (just tested top arrow)
Copied from Bootstrap 3 environment and changed bottom: 0; to bottom: -5px;
.tooltip.top .tooltip-arrow {
bottom: -5px;
left: 50%;
margin-left: -5px;
border-width: 5px 5px 0;
border-top-color: #000;
}

.tooltip-arrow {
position: absolute;
width: 0;
height: 0;
border: solid transparent;
}

saranglakare commented

Can anyone provide guidelines on how to use this with BS4? I read through the above comments, but it's not clear where to start (which branch to checkout, etc!). Thanks!

In the meantime, I am starting to use this slider for my Angular app: https://angular-slider.github.io/ng5-slider/ . Would love to shift to this one once BS4 is supported.

fighter777 commented

Bootstrap 4, issue after 3 years, a true solution or upgrade ?

rovolution commented

we would really appreciate a PR around BS4 support!

rovolution commented

@davidlesieur was there any effort to pickup the work again on this BS4 support PR? #856

davidlesieur commented

@rovolution unfortunately I have not worked on this further and can't promise I'll be able to help much in the short-term. I hope someone from the relatively large userbase can step in!

stevenbuccini commented

@rovolution Could you clarify exactly what the holdup is to getting the PR merged so I can take a crack at it?

rovolution commented

@stevenbuccini its been a while since i took a look at it, so let me pull it down and get back to you. thank you for volunteering to take on this effort!

  • 👍1
rovolution commented

@stevenbuccini just pulled down the branch in question and did a quick QA...everything appears to be fine! I think we can go ahead and merge.

rovolution commented

@stevenbuccini will continue conversation in the PR thread

rovolution commented

the BS4 branch has been merged and is available starting on v11.0.0! see CHANGELOG for further details: https://github.com/seiyria/bootstrap-slider/blob/master/CHANGELOG.md#1100--2020-06-03

  • 👍3
  • 😄1
  • 🎉3
  • ❤️4
  • 🚀3