Tooltip Syntax Error | Community
Skip to main content
A
Ameen_Dev
Level 4
July 22, 2022
Solved

Tooltip Syntax Error

  • July 22, 2022
  • 3 replies
  • 1426 views

I am trying to implement a tooltip but it is giving an error for the below syntax. Kindly help to solve this issue.

<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' ? '<div class='sec-secondary-headings'><h3>20% off on Mobile Devices</h3></div><div class='sec-paragraph'><div class='p3'><p>Coupon Applied: <b>SALE50</p></div> </div>' : ''}">
This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Ameen_Dev

The tooltip issue was resolved by adding a forward slash in front of the class. 

<div class=\'sec-secondary-headings\'><h3>20% off on Mobile Devices</h3></div><div  class=\'sec-paragraph\'><div class=\'p3\'><p>Coupon Applied: <b>SALE50</p></div> </div>

Thanks, everyone for the help.

3 replies

Mohit_KBansal
Adobe Employee
Mohit_KBansalAdobe Employee
Adobe Employee
July 22, 2022

In the Title attribute, you are trying to render html, which is causing issue.

<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' ? '
<div class='sec-secondary-headings'>
    <h3>20% off on Mobile Devices</h3>
</div>
<div class='sec-paragraph'>
    <div class='p3'>
        <p>Coupon Applied: <b>SALE50</p>
    </div>
</div>' : ''}">

Try encoding html 

<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' ? '
&lt;div class=&#39;sec-secondary-headings&#39;&gt;
    &lt;h3&gt;20% off on Mobile Devices&lt;/h3&gt;
&lt;/div&gt;
&lt;div class=&#39;sec-paragraph&#39;&gt;
    &lt;div class=&#39;p3&#39;&gt;
        &lt;p&gt;Coupon Applied: &lt;b&gt;SALE50&lt;/p&gt;
    &lt;/div&gt;
&lt;/div&gt;' : ''}">
    A
    Ameen_DevAuthor
    Level 4
    July 22, 2022

    Thanks @mohit_kbansal 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.

      Mohit_KBansal
      Adobe Employee
      Mohit_KBansalAdobe Employee
      Adobe Employee
      July 22, 2022

      In your tooltip javascript, decode html [1]

       

      [1] https://www.delftstack.com/howto/javascript/javascript-decode-html-entities/

        arunpatidar
        Community Advisor
        arunpatidarCommunity Advisor
        Community Advisor
        July 22, 2022

        Hi,

        You should not use title attribute for tooltip because of 

        Accessibility concerns

        Use of the title attribute is highly problematic for:

        • People using touch-only devices
        • People navigating with keyboards
        • People navigating with assistive technology such as screen readers or magnifiers
        • People experiencing fine motor control impairment
        • People with cognitive concerns

        Try to create span or p tag with tooltip content and on hover show the content, example 

        <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' : ''}"
>
    
<div class="tooltip-content hide">
  ${"<div class='sec-secondary-headings'><h3>20% off on Mobile Devices</h3></div><div class='sec-paragraph'><div class='p3'><p>Coupon Applied: <b>SALE50</p></div> </div>" @ context='html'}
</div>

        </div>
        Arun Patidar
        A
        Ameen_DevAuthorAccepted solution
        Level 4
        July 25, 2022

        The tooltip issue was resolved by adding a forward slash in front of the class. 

        <div class=\'sec-secondary-headings\'><h3>20% off on Mobile Devices</h3></div><div  class=\'sec-paragraph\'><div class=\'p3\'><p>Coupon Applied: <b>SALE50</p></div> </div>

        Thanks, everyone for the help.

        Terms & ConditionsAccessibility statement

        Loading footer...