How do I add a link to a form input tooltip in checkout?

Ask your questions
, ,
1

Related: How is a tooltip implemented for phone number on check out?

The issue

I have a custom field that I have added to the shipping address component in check out. In the tooltip for this input I would like to add some markup (preferably a link) but this is stripped out when it is rendered on the page. Is there a way of adding a link to a form tooltip?

Source

My XML:

<item name="pca-search" xsi:type="array">
    [...]
    <item name="tooltip" xsi:type="array">
        <item name="description" xsi:type="string" translate="true">Can't find your address? <a href="javascript:void(0)">Enter it manually</a>.</item>
    </item>
</item>

This outputs the following markup. Strangely it’s happy to print the last full stop, though the parser strips out the element and all contents:

<div class="field-tooltip-content" data-target="dropdown" aria-hidden="true">
    <!-- ko text: tooltip.description -->Can't find your address? .
    <!-- /ko -->
</div>

Question

How do I add a link to the tooltip content?

2

How to prevent Knockout escaping HTML?

3

A post was split to a new topic: Should I override an UI component’s template for modifying it?