I am building an app based off of the Calcite maps example and have run into an issue. When displaying a pie-chart in a popup it wont display the tooltip when hovering over the chart. At first I thought that it was something that I had tweaked in my app that was causing it not to appear. However, I can replicate the same issue when I take the feature layer with popup from the multiple popup elements example found here: https://developers.arcgis.com/javascript/latest/sample-code/popup-multipleelements/index.html and put it in the Calcite maps example found here: https://developers.arcgis.com/javascript/latest/sample-code/frameworks-bootstrap/index.html. The popup displays the requested data and chart, but when you hover over a wedge in the chart it doesn't show the category and amount in a tooltip as it should. There is something in the Calcite maps template that is prohibiting it from displaying, possibly a CSS issue?
Bob,
It is a calcite css issue with tooltips (it is an issue in 3.x as well).
You need to add this css rule (adjust colors as desired):
<SPAN class="selector token">.dijitTooltip</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="property token">position</SPAN><SPAN class="punctuation token">:</SPAN> absolute<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">z-index</SPAN><SPAN class="punctuation token">:</SPAN> 2000<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">display</SPAN><SPAN class="punctuation token">:</SPAN> block<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">left</SPAN><SPAN class="punctuation token">:</SPAN> 0<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">top</SPAN><SPAN class="punctuation token">:</SPAN> -10000px<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">overflow</SPAN><SPAN class="punctuation token">:</SPAN> visible<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">background-color</SPAN><SPAN class="punctuation token">:</SPAN> white<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">border-color</SPAN><SPAN class="punctuation token">:</SPAN> black<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">border-style</SPAN><SPAN class="punctuation token">:</SPAN> solid<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">border-width</SPAN><SPAN class="punctuation token">:</SPAN> thin<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">padding</SPAN><SPAN class="punctuation token">:</SPAN> 2px<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">font-size</SPAN><SPAN class="punctuation token">:</SPAN> 8pt<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">color</SPAN><SPAN class="punctuation token">:</SPAN> black<SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>
That did the trick, Thank You!
Membros conectados podem postar, seguir atualizações e mais. Novo aqui? Registre uma conta gratuita.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.