Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
SOLVED

Tooltip Syntax Error

Avatar

Level 4

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

Avatar

Correct answer by
Level 4

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.

View solution in original post

5 Replies

Avatar

Employee Advisor

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

Avatar

Level 4

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.

Avatar

Community Advisor

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

Avatar

Correct answer by
Level 4

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.