Tooltip Syntax Error

[Ameen_Dev]

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>' : ''}">

[Mohit_KBansal]

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;' : ''}">

[Ameen_Dev]

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]

In your tooltip javascript, decode html [1]

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

[arunpatidar]

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>

[Ameen_Dev · Accepted solution]

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.