Bootstrap 4 Compatibility

jeremylynch commented 7 years ago

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:

.top is now .tooltip-top
.tooltip-arrow has been removed
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 7 years ago

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

seiyria commented 7 years ago

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

jeremylynch commented 7 years ago

@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 7 years ago

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

natcohen commented 7 years ago

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

seiyria commented 7 years ago

Sure, if you submit a PR for it.

taha333taha commented 7 years ago

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 commented 7 years ago

@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 commented 7 years ago

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

slider-left

dhanyn10 commented 7 years ago

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

taha333taha commented 7 years ago

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

seiyria commented 7 years ago

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

On Fri, Jun 30, 2017, 7:45 AM taha333taha notifications@github.com 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 https://github.com/seiyria/bootstrap-slider/issues/689#issuecomment-312257827, or mute the thread https://github.com/notifications/unsubscribe-auth/AAum2dpWgnuzd-g51Rxcq5pXfbri_9NDks5sJO4BgaJpZM4LkQ8j .

str commented 7 years ago

@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 7 years ago

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 commented 7 years ago

i'll try to help you for this.

a1russell commented 7 years ago

Bootstrap v4 beta is released as of Aug 10

rovolution commented 7 years ago

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

gabel commented 6 years ago

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

seiyria commented 6 years ago

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

ricardo-ribeiro commented 6 years ago

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

danfox commented 6 years ago

After a year still no fix... :/

seiyria commented 6 years ago

You're welcome to submit a pull request if this is important to you. We're people too.

On Tue, May 29, 2018, 05:00 danfox notifications@github.com wrote:

After a year still no fix... :/

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/seiyria/bootstrap-slider/issues/689#issuecomment-392722349, or mute the thread https://github.com/notifications/unsubscribe-auth/AAum2VUA-UeoA5Z0FJvESUHKoFtLVF6Zks5t3RxbgaJpZM4LkQ8j .

davidlesieur commented 6 years ago

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 6 years ago

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 6 years ago

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 6 years ago

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 commented 6 years ago

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

davidlesieur commented 6 years ago

@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 commented 6 years ago

@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 6 years ago

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 commented 5 years ago

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 commented 5 years ago

@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 commented 5 years ago

@gzimmers Thanks

jud1 commented 5 years ago

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

bguralnik commented 4 years ago

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 4 years ago

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 4 years ago

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

rovolution commented 4 years ago

we would really appreciate a PR around BS4 support!

rovolution commented 4 years ago

@davidlesieur was there any effort to pickup the work again on this BS4 support PR? https://github.com/seiyria/bootstrap-slider/pull/856

davidlesieur commented 4 years ago

@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 4 years ago

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

rovolution commented 4 years ago

@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 commented 4 years ago

@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 4 years ago

@stevenbuccini will continue conversation in the PR thread

rovolution commented 4 years ago

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

seiyria / bootstrap-slider

Bootstrap 4 Compatibility #689

We have three things to change: