topic tooltip for draw tools not showing when using Bootstrap/JQuery in ArcGIS JavaScript Maps SDK Questions

tooltip for draw tools not showing when using Bootstrap/JQuery

AlexGole — Fri, 20 Mar 2015 16:47:17 GMT

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

Re: tooltip for draw tools not showing when using Bootstrap/JQuery

KellyHutchins — Mon, 23 Mar 2015 17:09:29 GMT

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.

Re: tooltip for draw tools not showing when using Bootstrap/JQuery

AlexGole — Mon, 27 Apr 2015 21:54:59 GMT

Thanks!

Re: tooltip for draw tools not showing when using Bootstrap/JQuery

TomWayson — Mon, 27 Apr 2015 22:00:08 GMT

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.

Re: tooltip for draw tools not showing when using Bootstrap/JQuery

AlexGole — Mon, 27 Apr 2015 22:06:10 GMT

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.

Re: tooltip for draw tools not showing when using Bootstrap/JQuery

TomWayson — Mon, 27 Apr 2015 22:22:14 GMT

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.

Re: tooltip for draw tools not showing when using Bootstrap/JQuery

Anonymous User — Sat, 11 Dec 2021 13:08:18 GMT

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

.tooltip {
  opacity: 1;
}

Re: tooltip for draw tools not showing when using Bootstrap/JQuery

LauraMiles1 — Mon, 06 Jun 2016 19:58:13 GMT

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

Re: tooltip for draw tools not showing when using Bootstrap/JQuery

DavidPuckett — Tue, 20 Sep 2016 23:06:33 GMT

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