tooltip for draw tools not showing when using Bootstrap/JQuery

4982
8
Jump to solution
03-20-2015 09:47 AM
AlexGole
Occasional Contributor II

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

Tags (3)
0 Kudos
1 Solution

Accepted Solutions
KellyHutchins
Esri Frequent Contributor

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. 

View solution in original post

8 Replies
KellyHutchins
Esri Frequent Contributor

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. 

View solution in original post

AlexGole
Occasional Contributor II

Thanks!

0 Kudos
TomWayson
Esri Contributor

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.    

0 Kudos
AlexGole
Occasional Contributor II

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.

0 Kudos
TomWayson
Esri Contributor

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.

0 Kudos
SageWall1
New Contributor III

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

.tooltip {

  opacity: 1;

}

LauraMiles1
Occasional Contributor III

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

0 Kudos
DavidPuckett
New Contributor II

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

0 Kudos