Bootstrap 4 Compatibility

[jeremylynch]

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]

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

[seiyria]

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

[jeremylynch]

@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]

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

[natcohen]

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

[seiyria]

Sure, if you submit a PR for it.

[taha333taha]

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

[str]

@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;
    }
}

[str]

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

[dhanyn10]

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

[taha333taha]

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

[seiyria]

We're happy to have pull requests but we don't actively work on this.

…

On Fri, Jun 30, 2017, 7:45 AM taha333taha ***@***.***> wrote: @str <https://github.com/str> i moved to *Ion range slider* , it's better in bootstrap 4 without any errors — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#689 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAum2dpWgnuzd-g51Rxcq5pXfbri_9NDks5sJO4BgaJpZM4LkQ8j> .

[str]

@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]

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;
}

[dhanyn10]

i'll try to help you for this.

[a1russell]

Bootstrap v4 beta is released as of Aug 10

[rovolution]

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

[gabel]

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

[seiyria]

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

[moritzvieli]

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]

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.

[rovolution]

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

[davidlesieur]

@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.

[rovolution]

@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]

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; }

[herryswastika]

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');

[gzimmers]

@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.

[herryswastika]

@gzimmers
Thanks

[jud1]

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;
        }

[bguralnik]

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]

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]

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

[rovolution]

we would really appreciate a PR around BS4 support!

[rovolution]

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

[davidlesieur]

@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]

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

[rovolution]

@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!

[rovolution]

@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]

@stevenbuccini will continue conversation in the PR thread

[rovolution]

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