tooltip for draw tools not showing when using Bootstrap/JQuery

[AlexGole]

Hi all,

I am using bootstrap and JQuery for my app and I am trying to display draw's tools by default tooltip "start drawing by double clicking". It seems like it is not working. This web app uses bootstrap and it is not showing either. 1. Is iit because of bootstrap? 2. Is there a way to show it using bootstrap?

Thank you,

Alex

[KellyHutchins · Accepted solution]

Alex,

It looks like the .tooltip styles in the bootstrap.min.css stylesheet are conflicting with the Esri drawing tooltips. If I create a local copy of bootstrap.min.css and comment out all the classes for tooltip the draw tooltips display fine. 

[AlexGole]

Thanks!

[TomWayson]

Alex, have you tried using (at least the .css from) Esri/bootstrap-map-js · GitHub

Part of what it does is to try and eliminate CSS collisions between the two libraries.    

[AlexGole]

Yes I have but as you can see on the following sample: Graphics .There still is an issue with the popup "Click to start drawing". It does not show when starting drawing (as it would in a dojo app). So I removed all CSS tooltip and that worked fine. Thankfully I dont need to use Bootstrap tooltip for my app.

[TomWayson]

Ah, I see. You might try changing that page so that it loads the Esri CSS after the Bootstrap CSS. That's how the demos on the Bootstrap Map page are configured. I wonder if that would make it so that you would not have to remove Bootstrap's tooltip code.

[Anonymous User]

Adding opacity: 1 to .tooltip seems to fix the conflict between bootstrap and esri .tooltip classes.

.tooltip {
  opacity: 1;
}

[LauraMiles1]

I'm still getting this problem with bootstrap 3.3.4 and this worked for me. Thanks!

[DavidPuckett]

Thank you. Just a note that you'll want to load the css that contains this fix after bootstrap. OR use !important.