<?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:taxo="http://purl.org/rss/1.0/modules/taxonomy/" version="2.0">
  <channel>
    <title>topic Re: Hover tooltipFields and JSON data in ArcGIS JavaScript Maps SDK Questions</title>
    <link>https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/hover-tooltipfields-and-json-data/m-p/28692#M2446</link>
    <description>&lt;HTML&gt;&lt;HEAD&gt;&lt;/HEAD&gt;&lt;BODY&gt;&lt;P&gt;So the issue is that the tooltip text is showing up at a different part of the web page? &amp;nbsp;Sounds like a CSS issue... did you include the CSS similar to what is being used in the sample? &amp;nbsp;Do you have a jsbin or similar that shows the problem?&lt;/P&gt;&lt;P&gt;&lt;/P&gt;&lt;P&gt;&lt;/P&gt;&lt;PRE class="lia-code-sample line-numbers language-none"&gt;&lt;CODE&gt;&amp;lt;link rel=&lt;SPAN class="string token"&gt;"stylesheet"&lt;/SPAN&gt; href=&lt;SPAN class="string token"&gt;&lt;SPAN&gt;"&lt;/SPAN&gt;&lt;A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=https%3A%2F%2Fjs.arcgis.com%2F4.4%2Fesri%2Fcss%2Fmain.css" target="_blank"&gt;https://js.arcgis.com/4.4/esri/css/main.css&lt;/A&gt;&lt;SPAN&gt;"&lt;/SPAN&gt;&lt;/SPAN&gt;&amp;gt;
&amp;lt;link rel=&lt;SPAN class="string token"&gt;"stylesheet"&lt;/SPAN&gt; href=&lt;SPAN class="string token"&gt;&lt;SPAN&gt;"&lt;/SPAN&gt;&lt;A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=https%3A%2F%2Fjs.arcgis.com%2F4.4%2Fdijit%2Fthemes%2Fclaro%2Fclaro.css" target="_blank"&gt;https://js.arcgis.com/4.4/dijit/themes/claro/claro.css&lt;/A&gt;&lt;SPAN&gt;"&lt;/SPAN&gt;&lt;/SPAN&gt;&amp;gt;‍‍&lt;SPAN class="line-numbers-rows"&gt;&lt;SPAN&gt;‍&lt;/SPAN&gt;&lt;SPAN&gt;‍&lt;/SPAN&gt;&lt;/SPAN&gt;&lt;/CODE&gt;&lt;/PRE&gt;&lt;/BODY&gt;&lt;/HTML&gt;</description>
    <pubDate>Fri, 10 Dec 2021 21:09:28 GMT</pubDate>
    <dc:creator>JohnGrayson</dc:creator>
    <dc:date>2021-12-10T21:09:28Z</dc:date>
    <item>
      <title>Hover tooltipFields and JSON data</title>
      <link>https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/hover-tooltipfields-and-json-data/m-p/28690#M2444</link>
      <description>&lt;HTML&gt;&lt;HEAD&gt;&lt;/HEAD&gt;&lt;BODY&gt;&lt;P style="background-color: #ffffff; border: 0px;"&gt;So I had some major developments towards finding a solution.&amp;nbsp;&lt;/P&gt;&lt;P style="background-color: #ffffff; border: 0px;"&gt;&amp;nbsp;&lt;/P&gt;&lt;P style="background-color: #ffffff; border: 0px;"&gt;I managed to precent a pie-chart and doing so in &amp;nbsp;a dynamic manner regardless of what kind of data I'm working with.&amp;nbsp;&lt;/P&gt;&lt;P style="background-color: #ffffff; border: 0px;"&gt;The issue I'm experiencing though in regards to the tooltip when hovering on each one of those slices:&lt;/P&gt;&lt;P style="background-color: #ffffff; border: 0px;"&gt;&lt;IMG alt="" class="image-1 jive-image j-img-original" src="/legacyfs/online/363599_Screen Shot 2017-07-19 at 2.17.05 PM.png" style="width: 620px; height: 658px;" /&gt;&lt;/P&gt;&lt;P style="border: 0px;"&gt;as you can see in the image for some reason whenever I'm hovering on the slices of the pie-chart the data of each of those slices gets presented to at the bottom left corner of this image (5-9 yrs:34) . Instead I would like to have it similar to the way they have it in this example:&lt;/P&gt;&lt;P style="border: 0px;"&gt;&lt;A href="https://community.esri.com/external-link.jspa?url=https%3A%2F%2Fdevelopers.arcgis.com%2Fjavascript%2Flatest%2Fsample-code%2Fsandbox%2Findex.html%3Fsample%3Dpopup-multipleelements" rel="nofollow" style="color: #287433; border: 0px; font-weight: inherit; text-decoration: none; padding: 0px calc(12px + 0.35ex) 0px 0px;" target="_blank"&gt;ArcGIS API for JavaScript Sandbox&lt;/A&gt;&amp;nbsp;&lt;/P&gt;&lt;P style="border: 0px;"&gt;&amp;nbsp;&lt;/P&gt;&lt;P style="border: 0px;"&gt;Now understand&amp;nbsp;that they working in their sandbox with hosted layer from their online tool (?), however in my case I'm working with locally fetched data from a JSON file.&amp;nbsp;&lt;/P&gt;&lt;P style="border: 0px;"&gt;This is how my popup tempalate looks like:&lt;/P&gt;&lt;P style="border: 0px;"&gt;&lt;IMG alt="" class="image-2 jive-image j-img-original" src="/legacyfs/online/363600_Screen Shot 2017-07-19 at 2.22.20 PM.png" style="width: 620px; height: 578px;" /&gt;&lt;/P&gt;&lt;P style="background-color: #ffffff; border: 0px;"&gt;Now I removed the&amp;nbsp;&lt;EM style="border: 0px; font-weight: inherit;"&gt;&lt;STRONG style="border: 0px; font-weight: bold;"&gt;tooltipFields&lt;/STRONG&gt;&lt;/EM&gt;&lt;SPAN&gt;&amp;nbsp;&lt;/SPAN&gt;property because it wasn't working at all.&amp;nbsp;&lt;/P&gt;&lt;P style="background-color: #ffffff; border: 0px;"&gt;and the&lt;SPAN&gt;&amp;nbsp;&lt;/SPAN&gt;&lt;EM style="border: 0px; font-weight: inherit;"&gt;&lt;STRONG style="border: 0px; font-weight: bold;"&gt;fields_to_present&lt;/STRONG&gt;&lt;/EM&gt;&lt;SPAN&gt;&amp;nbsp;&lt;/SPAN&gt;array hold the following items:&lt;/P&gt;&lt;P style="background-color: #ffffff; border: 0px;"&gt;&lt;IMG alt="" class="image-3 jive-image j-img-original" src="/legacyfs/online/363601_Screen Shot 2017-07-19 at 2.24.53 PM.png" style="width: 620px; height: 166px;" /&gt;&lt;/P&gt;&lt;/BODY&gt;&lt;/HTML&gt;</description>
      <pubDate>Thu, 20 Jul 2017 16:05:02 GMT</pubDate>
      <guid>https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/hover-tooltipfields-and-json-data/m-p/28690#M2444</guid>
      <dc:creator>AntonAntonenko</dc:creator>
      <dc:date>2017-07-20T16:05:02Z</dc:date>
    </item>
    <item>
      <title>Re: Hover tooltipFields and JSON data</title>
      <link>https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/hover-tooltipfields-and-json-data/m-p/28691#M2445</link>
      <description>&lt;HTML&gt;&lt;HEAD&gt;&lt;/HEAD&gt;&lt;BODY&gt;&lt;P&gt;Can you add a copy of what your json looks like? Currently it looks like the field you are using for the tooltip is an array with 9 values?&amp;nbsp;&lt;/P&gt;&lt;/BODY&gt;&lt;/HTML&gt;</description>
      <pubDate>Thu, 20 Jul 2017 16:25:41 GMT</pubDate>
      <guid>https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/hover-tooltipfields-and-json-data/m-p/28691#M2445</guid>
      <dc:creator>KellyHutchins</dc:creator>
      <dc:date>2017-07-20T16:25:41Z</dc:date>
    </item>
    <item>
      <title>Re: Hover tooltipFields and JSON data</title>
      <link>https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/hover-tooltipfields-and-json-data/m-p/28692#M2446</link>
      <description>&lt;HTML&gt;&lt;HEAD&gt;&lt;/HEAD&gt;&lt;BODY&gt;&lt;P&gt;So the issue is that the tooltip text is showing up at a different part of the web page? &amp;nbsp;Sounds like a CSS issue... did you include the CSS similar to what is being used in the sample? &amp;nbsp;Do you have a jsbin or similar that shows the problem?&lt;/P&gt;&lt;P&gt;&lt;/P&gt;&lt;P&gt;&lt;/P&gt;&lt;PRE class="lia-code-sample line-numbers language-none"&gt;&lt;CODE&gt;&amp;lt;link rel=&lt;SPAN class="string token"&gt;"stylesheet"&lt;/SPAN&gt; href=&lt;SPAN class="string token"&gt;&lt;SPAN&gt;"&lt;/SPAN&gt;&lt;A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=https%3A%2F%2Fjs.arcgis.com%2F4.4%2Fesri%2Fcss%2Fmain.css" target="_blank"&gt;https://js.arcgis.com/4.4/esri/css/main.css&lt;/A&gt;&lt;SPAN&gt;"&lt;/SPAN&gt;&lt;/SPAN&gt;&amp;gt;
&amp;lt;link rel=&lt;SPAN class="string token"&gt;"stylesheet"&lt;/SPAN&gt; href=&lt;SPAN class="string token"&gt;&lt;SPAN&gt;"&lt;/SPAN&gt;&lt;A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=https%3A%2F%2Fjs.arcgis.com%2F4.4%2Fdijit%2Fthemes%2Fclaro%2Fclaro.css" target="_blank"&gt;https://js.arcgis.com/4.4/dijit/themes/claro/claro.css&lt;/A&gt;&lt;SPAN&gt;"&lt;/SPAN&gt;&lt;/SPAN&gt;&amp;gt;‍‍&lt;SPAN class="line-numbers-rows"&gt;&lt;SPAN&gt;‍&lt;/SPAN&gt;&lt;SPAN&gt;‍&lt;/SPAN&gt;&lt;/SPAN&gt;&lt;/CODE&gt;&lt;/PRE&gt;&lt;/BODY&gt;&lt;/HTML&gt;</description>
      <pubDate>Fri, 10 Dec 2021 21:09:28 GMT</pubDate>
      <guid>https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/hover-tooltipfields-and-json-data/m-p/28692#M2446</guid>
      <dc:creator>JohnGrayson</dc:creator>
      <dc:date>2021-12-10T21:09:28Z</dc:date>
    </item>
    <item>
      <title>Re: Hover tooltipFields and JSON data</title>
      <link>https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/hover-tooltipfields-and-json-data/m-p/28693#M2447</link>
      <description>&lt;HTML&gt;&lt;HEAD&gt;&lt;/HEAD&gt;&lt;BODY&gt;&lt;P&gt;Hello John,&amp;nbsp;&lt;/P&gt;&lt;P&gt;&lt;/P&gt;&lt;P&gt;Thank you very much for the heads up, I can't believe how I could miss the tag at the header, the hover is showing right now properly.&amp;nbsp;&lt;/P&gt;&lt;P&gt;My only question right now ill be is: Why is it showing?&amp;nbsp;&lt;/P&gt;&lt;P&gt;In my code below:&lt;/P&gt;&lt;P&gt;&lt;IMG alt="" class="image-1 jive-image j-img-original" src="/legacyfs/online/364064_Screen Shot 2017-07-24 at 9.46.54 AM.png" style="width: 620px; height: 1284px;" /&gt;&lt;/P&gt;&lt;P&gt;the only field that I have passed to tooltipFields is "0-14 yrs", however when I hover over other slices of the pie it shows the other age range values as well:&lt;/P&gt;&lt;P&gt;&lt;IMG alt="" class="image-2 jive-image j-img-original" src="/legacyfs/online/364065_Screen Shot 2017-07-24 at 9.48.43 AM.png" style="height: auto;" /&gt;&lt;/P&gt;&lt;P&gt;did I understand the role of tooltipFields wrongly?&amp;nbsp;&lt;/P&gt;&lt;P&gt;according to the documentation, it is responsible for the hovering pop portion of the charts:&lt;/P&gt;&lt;P&gt;&lt;IMG alt="" class="image-3 jive-image j-img-original" src="/legacyfs/online/364066_Screen Shot 2017-07-24 at 9.50.17 AM.png" style="width: 620px; height: 84px;" /&gt;&lt;/P&gt;&lt;P&gt;so how come it knows to display the over value as well??&lt;/P&gt;&lt;/BODY&gt;&lt;/HTML&gt;</description>
      <pubDate>Mon, 24 Jul 2017 13:51:37 GMT</pubDate>
      <guid>https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/hover-tooltipfields-and-json-data/m-p/28693#M2447</guid>
      <dc:creator>AntonAntonenko</dc:creator>
      <dc:date>2017-07-24T13:51:37Z</dc:date>
    </item>
    <item>
      <title>Re: Hover tooltipFields and JSON data</title>
      <link>https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/hover-tooltipfields-and-json-data/m-p/28694#M2448</link>
      <description>&lt;HTML&gt;&lt;HEAD&gt;&lt;/HEAD&gt;&lt;BODY&gt;&lt;P&gt;Hello Kelly,&amp;nbsp;&lt;/P&gt;&lt;P&gt;&lt;/P&gt;&lt;P&gt;I managed to show the popup according to the instructions of John Grayson (user below), however now I'm met with the issue of trying to understand how come it shows all the other 9 values&amp;nbsp;&lt;/P&gt;&lt;OL class="" style="color: #212121 !important; font-size: 11px;"&gt;&lt;OL class="" style="padding-left: 12px;"&gt;&lt;LI&gt;&lt;SPAN class="" style="color: #881391;"&gt;0&lt;/SPAN&gt;&lt;SPAN class="" style="padding-right: 5px;"&gt;:&lt;/SPAN&gt;&lt;SPAN class="" style="color: #c41a16;"&gt;&lt;SPAN class="" style="color: #222222;"&gt;"&lt;/SPAN&gt;0-14 yrs&lt;SPAN class="" style="color: #222222;"&gt;"&lt;/SPAN&gt;&lt;/SPAN&gt;&lt;/LI&gt;&lt;LI&gt;&lt;SPAN class="" style="color: #881391;"&gt;1&lt;/SPAN&gt;&lt;SPAN class="" style="padding-right: 5px;"&gt;:&lt;/SPAN&gt;&lt;SPAN class="" style="color: #c41a16;"&gt;&lt;SPAN class="" style="color: #222222;"&gt;"&lt;/SPAN&gt;0-4 yrs&lt;SPAN class="" style="color: #222222;"&gt;"&lt;/SPAN&gt;&lt;/SPAN&gt;&lt;/LI&gt;&lt;LI&gt;&lt;SPAN class="" style="color: #881391;"&gt;2&lt;/SPAN&gt;&lt;SPAN class="" style="padding-right: 5px;"&gt;:&lt;/SPAN&gt;&lt;SPAN class="" style="color: #c41a16;"&gt;&lt;SPAN class="" style="color: #222222;"&gt;"&lt;/SPAN&gt;5-9 yrs&lt;SPAN class="" style="color: #222222;"&gt;"&lt;/SPAN&gt;&lt;/SPAN&gt;&lt;/LI&gt;&lt;LI&gt;&lt;SPAN class="" style="color: #881391;"&gt;3&lt;/SPAN&gt;&lt;SPAN class="" style="padding-right: 5px;"&gt;:&lt;/SPAN&gt;&lt;SPAN class="" style="color: #c41a16;"&gt;&lt;SPAN class="" style="color: #222222;"&gt;"&lt;/SPAN&gt;10-14 yrs&lt;SPAN class="" style="color: #222222;"&gt;"&lt;/SPAN&gt;&lt;/SPAN&gt;&lt;/LI&gt;&lt;LI&gt;&lt;SPAN class="" style="color: #881391;"&gt;4&lt;/SPAN&gt;&lt;SPAN class="" style="padding-right: 5px;"&gt;:&lt;/SPAN&gt;&lt;SPAN class="" style="color: #c41a16;"&gt;&lt;SPAN class="" style="color: #222222;"&gt;"&lt;/SPAN&gt;15-24 yrs&lt;SPAN class="" style="color: #222222;"&gt;"&lt;/SPAN&gt;&lt;/SPAN&gt;&lt;/LI&gt;&lt;LI&gt;&lt;SPAN class="" style="color: #881391;"&gt;5&lt;/SPAN&gt;&lt;SPAN class="" style="padding-right: 5px;"&gt;:&lt;/SPAN&gt;&lt;SPAN class="" style="color: #c41a16;"&gt;&lt;SPAN class="" style="color: #222222;"&gt;"&lt;/SPAN&gt;15-19 yrs&lt;SPAN class="" style="color: #222222;"&gt;"&lt;/SPAN&gt;&lt;/SPAN&gt;&lt;/LI&gt;&lt;LI&gt;&lt;SPAN class="" style="color: #881391;"&gt;6&lt;/SPAN&gt;&lt;SPAN class="" style="padding-right: 5px;"&gt;:&lt;/SPAN&gt;&lt;SPAN class="" style="color: #c41a16;"&gt;&lt;SPAN class="" style="color: #222222;"&gt;"&lt;/SPAN&gt;20-24 yrs&lt;SPAN class="" style="color: #222222;"&gt;"&lt;/SPAN&gt;&lt;/SPAN&gt;&lt;/LI&gt;&lt;LI&gt;&lt;SPAN class="" style="color: #881391;"&gt;7&lt;/SPAN&gt;&lt;SPAN class="" style="padding-right: 5px;"&gt;:&lt;/SPAN&gt;&lt;SPAN class="" style="color: #c41a16;"&gt;&lt;SPAN class="" style="color: #222222;"&gt;"&lt;/SPAN&gt;25-34 yrs&lt;SPAN class="" style="color: #222222;"&gt;"&lt;/SPAN&gt;&lt;/SPAN&gt;&lt;/LI&gt;&lt;LI&gt;&lt;SPAN class="" style="color: #881391;"&gt;8&lt;/SPAN&gt;&lt;SPAN class="" style="padding-right: 5px;"&gt;:&lt;/SPAN&gt;&lt;SPAN class="" style="color: #c41a16;"&gt;&lt;SPAN class="" style="color: #222222;"&gt;"&lt;/SPAN&gt;25-29 yrs&lt;SPAN class="" style="color: #222222;"&gt;"&lt;/SPAN&gt;&lt;/SPAN&gt;&lt;/LI&gt;&lt;/OL&gt;&lt;/OL&gt;&lt;P&gt;if I only passed one ("0-14 yrs") to the tooltipFields.&lt;/P&gt;&lt;P&gt;I added the JSON below as requested:&lt;/P&gt;&lt;P&gt;&lt;/P&gt;&lt;P&gt;&lt;IMG alt="" class="image-1 jive-image j-img-original" src="/legacyfs/online/364067_Screen Shot 2017-07-24 at 9.33.49 AM.png" style="width: 620px; height: 334px;" /&gt;&lt;/P&gt;&lt;P&gt;(above) This is how my county data arrives in its pure JSON form (before I restructure it).&lt;/P&gt;&lt;P&gt;&lt;/P&gt;&lt;P&gt;&lt;/P&gt;&lt;P&gt;&lt;IMG alt="" class="image-4 jive-image j-img-original" src="/legacyfs/online/364075_Screen Shot 2017-07-24 at 9.34.06 AM.png" style="width: 620px; height: 384px;" /&gt;&lt;/P&gt;&lt;P&gt;(above) This is how my youth demographic data arrives in its pure JSON form.&amp;nbsp;&lt;/P&gt;&lt;P&gt;** I censored the values inside each property, they are not empty&lt;/P&gt;&lt;P&gt;&lt;/P&gt;&lt;P&gt;&lt;IMG alt="" class="image-5 jive-image j-img-original" src="/legacyfs/online/364085_Screen Shot 2017-07-24 at 9.34.37 AM.png" style="width: 620px; height: 389px;" /&gt;&lt;/P&gt;&lt;P&gt;(above) and this is how my data looks after I combined, restructured and converted the JSON arrays into presentable format ready to be consumed by a Featurelayer.&amp;nbsp;&lt;/P&gt;&lt;P&gt;&lt;SPAN&gt;** I censored the values inside each property, they are not empty&lt;/SPAN&gt;&lt;/P&gt;&lt;P&gt;&lt;/P&gt;&lt;P&gt;Please help me&amp;nbsp;understand this.&lt;/P&gt;&lt;P&gt;&lt;/P&gt;&lt;P&gt;P.S:&lt;/P&gt;&lt;P&gt;there is a lot of extra information if need, in my replay&amp;nbsp;to John Grayson.&lt;/P&gt;&lt;/BODY&gt;&lt;/HTML&gt;</description>
      <pubDate>Mon, 24 Jul 2017 14:50:53 GMT</pubDate>
      <guid>https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/hover-tooltipfields-and-json-data/m-p/28694#M2448</guid>
      <dc:creator>AntonAntonenko</dc:creator>
      <dc:date>2017-07-24T14:50:53Z</dc:date>
    </item>
  </channel>
</rss>

