Tooltip Syntax Error | Community
Skip to main content
Ameen_Dev
Level 4
Jul 22, 2022 3:33 AM UTC
Solved

Tooltip Syntax Error

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.
Ameen_DevAccepted solution
Level 4
Jul 25, 2022 2:03 PM UTC

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 reply

5 replies

Ameen_DevAuthorAccepted solution
Level 4
Jul 25, 2022 2:03 PM UTC

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.

Translate
arunpatidar
arunpatidar
New Participant
Jul 22, 2022 8:44 AM UTC

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>
Translate
Arun Patidar
Mohit_KBansal
Mohit_KBansal
Employee
Jul 22, 2022 3:48 AM UTC

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;' : ''}">
Translate
    Ameen_DevAuthor
    Level 4
    Jul 22, 2022 3:55 AM UTC

    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.

    Translate
      Mohit_KBansal
      Mohit_KBansal
      Employee
      Jul 22, 2022 4:19 AM UTC

      In your tooltip javascript, decode html [1]

       

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

      Translate
        Terms & ConditionsAccessibility statement

        Loading footer...