<?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: Tooltip Syntax Error in Adobe Experience Manager Questions</title>
    <link>https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/tooltip-syntax-error/m-p/462233#M133371</link>
    <description>&lt;P&gt;Thanks&amp;nbsp;&lt;LI-USER uid="17518938"&gt;&lt;/LI-USER&gt;&amp;nbsp;for your reply. The error was resolved but the encoded HTML did not show the content. The tooltip box is empty, showing white space instead of content.&lt;/P&gt;</description>
    <pubDate>Fri, 22 Jul 2022 03:55:48 GMT</pubDate>
    <dc:creator>Ameen_Dev</dc:creator>
    <dc:date>2022-07-22T03:55:48Z</dc:date>
    <item>
      <title>Tooltip Syntax Error</title>
      <link>https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/tooltip-syntax-error/m-p/462229#M133367</link>
      <description>&lt;P&gt;I am trying to implement a tooltip but it is giving an error for the below syntax. Kindly help to solve this issue.&lt;/P&gt;&lt;LI-CODE lang="markup"&gt;&amp;lt;p data-bs-toggle="${item.includeIcon == 'true' ? 'tooltip' : ''}" data-bs-html="${item.includeIcon == 'true' ? 'true' : ''}" data-bs-custom-class="${item.includeIcon == 'true' ? 'tooltip-white' : ''}"
data-bs-placement="${item.includeIcon == 'true' ? 'right' : ''}"
title="${item.includeIcon == 'true' ? '&amp;lt;div  class='sec-secondary-headings'&amp;gt;&amp;lt;h3&amp;gt;20% off on Mobile Devices&amp;lt;/h3&amp;gt;&amp;lt;/div&amp;gt;&amp;lt;div  class='sec-paragraph'&amp;gt;&amp;lt;div class='p3'&amp;gt;&amp;lt;p&amp;gt;Coupon Applied: &amp;lt;b&amp;gt;SALE50&amp;lt;/p&amp;gt;&amp;lt;/div&amp;gt; &amp;lt;/div&amp;gt;' : ''}"&amp;gt;&lt;/LI-CODE&gt;</description>
      <pubDate>Fri, 22 Jul 2022 03:33:13 GMT</pubDate>
      <guid>https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/tooltip-syntax-error/m-p/462229#M133367</guid>
      <dc:creator>Ameen_Dev</dc:creator>
      <dc:date>2022-07-22T03:33:13Z</dc:date>
    </item>
    <item>
      <title>Re: Tooltip Syntax Error</title>
      <link>https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/tooltip-syntax-error/m-p/462231#M133369</link>
      <description>&lt;P&gt;In the Title attribute, you are trying to render html, which is causing issue.&lt;/P&gt;&lt;PRE&gt;&amp;lt;p data-bs-toggle="${item.includeIcon == 'true' ? 'tooltip' : ''}" 
data-bs-html="${item.includeIcon == 'true' ? 'true' : ''}" 
data-bs-custom-class="${item.includeIcon == 'true' ? 'tooltip-white' : ''}"
data-bs-placement="${item.includeIcon == 'true' ? 'right' : ''}"
&lt;FONT color="#FF0000"&gt;&lt;EM&gt;&lt;STRONG&gt;title="${item.includeIcon == 'true' ? '
&amp;lt;div class='sec-secondary-headings'&amp;gt;
    &amp;lt;h3&amp;gt;20% off on Mobile Devices&amp;lt;/h3&amp;gt;
&amp;lt;/div&amp;gt;
&amp;lt;div class='sec-paragraph'&amp;gt;
    &amp;lt;div class='p3'&amp;gt;
        &amp;lt;p&amp;gt;Coupon Applied: &amp;lt;b&amp;gt;SALE50&amp;lt;/p&amp;gt;
    &amp;lt;/div&amp;gt;
&amp;lt;/div&amp;gt;&lt;/STRONG&gt;&lt;/EM&gt;&lt;/FONT&gt;' : ''}"&amp;gt;&lt;/PRE&gt;&lt;P&gt;Try encoding html&amp;nbsp;&lt;/P&gt;&lt;PRE&gt;&amp;lt;p data-bs-toggle="${item.includeIcon == 'true' ? 'tooltip' : ''}" 
data-bs-html="${item.includeIcon == 'true' ? 'true' : ''}" 
data-bs-custom-class="${item.includeIcon == 'true' ? 'tooltip-white' : ''}"
data-bs-placement="${item.includeIcon == 'true' ? 'right' : ''}"
&lt;FONT color="#008080"&gt;&lt;STRONG&gt;title="${item.includeIcon == 'true' ? '
&amp;amp;lt;div class=&amp;amp;#39;sec-secondary-headings&amp;amp;#39;&amp;amp;gt;
    &amp;amp;lt;h3&amp;amp;gt;20% off on Mobile Devices&amp;amp;lt;/h3&amp;amp;gt;
&amp;amp;lt;/div&amp;amp;gt;
&amp;amp;lt;div class=&amp;amp;#39;sec-paragraph&amp;amp;#39;&amp;amp;gt;
    &amp;amp;lt;div class=&amp;amp;#39;p3&amp;amp;#39;&amp;amp;gt;
        &amp;amp;lt;p&amp;amp;gt;Coupon Applied: &amp;amp;lt;b&amp;amp;gt;SALE50&amp;amp;lt;/p&amp;amp;gt;
    &amp;amp;lt;/div&amp;amp;gt;
&amp;amp;lt;/div&amp;amp;gt;&lt;/STRONG&gt;&lt;/FONT&gt;' : ''}"&amp;gt;&lt;/PRE&gt;</description>
      <pubDate>Fri, 22 Jul 2022 03:48:04 GMT</pubDate>
      <guid>https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/tooltip-syntax-error/m-p/462231#M133369</guid>
      <dc:creator>Mohit_KBansal</dc:creator>
      <dc:date>2022-07-22T03:48:04Z</dc:date>
    </item>
    <item>
      <title>Re: Tooltip Syntax Error</title>
      <link>https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/tooltip-syntax-error/m-p/462233#M133371</link>
      <description>&lt;P&gt;Thanks&amp;nbsp;&lt;LI-USER uid="17518938"&gt;&lt;/LI-USER&gt;&amp;nbsp;for your reply. The error was resolved but the encoded HTML did not show the content. The tooltip box is empty, showing white space instead of content.&lt;/P&gt;</description>
      <pubDate>Fri, 22 Jul 2022 03:55:48 GMT</pubDate>
      <guid>https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/tooltip-syntax-error/m-p/462233#M133371</guid>
      <dc:creator>Ameen_Dev</dc:creator>
      <dc:date>2022-07-22T03:55:48Z</dc:date>
    </item>
    <item>
      <title>Re: Tooltip Syntax Error</title>
      <link>https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/tooltip-syntax-error/m-p/462234#M133372</link>
      <description>&lt;P&gt;In your tooltip javascript, decode html [1]&lt;/P&gt;&lt;P&gt;&amp;nbsp;&lt;/P&gt;&lt;P&gt;[1]&amp;nbsp;&lt;A href="https://www.delftstack.com/howto/javascript/javascript-decode-html-entities/" target="_blank"&gt;https://www.delftstack.com/howto/javascript/javascript-decode-html-entities/&lt;/A&gt;&lt;/P&gt;</description>
      <pubDate>Fri, 22 Jul 2022 04:19:33 GMT</pubDate>
      <guid>https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/tooltip-syntax-error/m-p/462234#M133372</guid>
      <dc:creator>Mohit_KBansal</dc:creator>
      <dc:date>2022-07-22T04:19:33Z</dc:date>
    </item>
    <item>
      <title>Re: Tooltip Syntax Error</title>
      <link>https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/tooltip-syntax-error/m-p/462311#M133413</link>
      <description>&lt;P&gt;Hi,&lt;/P&gt;&lt;P&gt;You should not use title attribute for tooltip because of&amp;nbsp;&lt;/P&gt;&lt;H2&gt;&lt;A title="Permalink to Accessibility concerns" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title#accessibility_concerns" target="_blank" rel="noopener"&gt;Accessibility concerns&lt;/A&gt;&lt;/H2&gt;&lt;DIV class=""&gt;&lt;P&gt;Use of the&lt;SPAN&gt;&amp;nbsp;&lt;/SPAN&gt;title&lt;SPAN&gt;&amp;nbsp;&lt;/SPAN&gt;attribute is highly problematic for:&lt;/P&gt;&lt;UL&gt;&lt;LI&gt;People using touch-only devices&lt;/LI&gt;&lt;LI&gt;People navigating with keyboards&lt;/LI&gt;&lt;LI&gt;People navigating with assistive technology such as screen readers or magnifiers&lt;/LI&gt;&lt;LI&gt;People experiencing fine motor control impairment&lt;/LI&gt;&lt;LI&gt;People with cognitive concerns&lt;/LI&gt;&lt;/UL&gt;&lt;P&gt;Try to create span or p tag with tooltip content and on hover show the content, example&amp;nbsp;&lt;/P&gt;&lt;PRE&gt;&amp;lt;div data-bs-toggle="${item.includeIcon == 'true' ? 'tooltip' : ''}"
data-bs-html="${item.includeIcon == 'true' ? 'true' : ''}"
data-bs-custom-class="${item.includeIcon == 'true' ? 'tooltip-white' : ''}"
data-bs-placement="${item.includeIcon == 'true' ? 'right' : ''}"
&amp;gt;
    
&amp;lt;div class="tooltip-content hide"&amp;gt;
  ${"&amp;lt;div class='sec-secondary-headings'&amp;gt;&amp;lt;h3&amp;gt;20% off on Mobile Devices&amp;lt;/h3&amp;gt;&amp;lt;/div&amp;gt;&amp;lt;div class='sec-paragraph'&amp;gt;&amp;lt;div class='p3'&amp;gt;&amp;lt;p&amp;gt;Coupon Applied: &amp;lt;b&amp;gt;SALE50&amp;lt;/p&amp;gt;&amp;lt;/div&amp;gt; &amp;lt;/div&amp;gt;" @ context='html'}
&amp;lt;/div&amp;gt;&lt;BR /&gt;&lt;BR /&gt;&amp;lt;/div&amp;gt;&lt;/PRE&gt;&lt;/DIV&gt;</description>
      <pubDate>Fri, 22 Jul 2022 08:45:07 GMT</pubDate>
      <guid>https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/tooltip-syntax-error/m-p/462311#M133413</guid>
      <dc:creator>arunpatidar</dc:creator>
      <dc:date>2022-07-22T08:45:07Z</dc:date>
    </item>
    <item>
      <title>Re: Tooltip Syntax Error</title>
      <link>https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/tooltip-syntax-error/m-p/462566#M133514</link>
      <description>&lt;P&gt;The tooltip issue was resolved by adding a forward slash in front of the class.&amp;nbsp;&lt;/P&gt;
&lt;PRE&gt;&amp;lt;div class=\'sec-secondary-headings\'&amp;gt;&amp;lt;h3&amp;gt;20% off on Mobile Devices&amp;lt;/h3&amp;gt;&amp;lt;/div&amp;gt;&amp;lt;div  class=\'sec-paragraph\'&amp;gt;&amp;lt;div class=\'p3\'&amp;gt;&amp;lt;p&amp;gt;Coupon Applied: &amp;lt;b&amp;gt;SALE50&amp;lt;/p&amp;gt;&amp;lt;/div&amp;gt; &amp;lt;/div&amp;gt;&lt;/PRE&gt;
&lt;P&gt;Thanks, everyone for the help.&lt;/P&gt;</description>
      <pubDate>Mon, 25 Jul 2022 14:03:27 GMT</pubDate>
      <guid>https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/tooltip-syntax-error/m-p/462566#M133514</guid>
      <dc:creator>Ameen_Dev</dc:creator>
      <dc:date>2022-07-25T14:03:27Z</dc:date>
    </item>
  </channel>
</rss>

