Class SmartResponseComponent

The SmartResponse component is used to display a brief explanation or contextual information when the user hovers over an element.

Tag

The tag for this component is <hawksearch-smartresponse>.

Event-Binding Attributes

These attributes are used to position the smartresponse based on the size and scroll position of the active window. The hawksearch-smartresponse attribute should be present on an element containing both the element the smartresponse is attached to (to display on hover) and the element containing the smartresponse content, which should have a hawksearch-smartresponse-content attribute.

Default Template

The following is the default Handlebars template for this component. To create a custom template, it is recommended to use this as a starting point.

<span class="smartresponse" hawksearch-smartresponse>
    <div class="smartresponse__icon">
        {{#if busy}}
            <div class="spinner"></div>
        {{else}}
            <hawksearch-icon name="sparkles"></hawksearch-icon>
        {{/if}}
    </div>
    <div class="smartresponse__info {{attribute ' busy' busy}}">
        {{#if strings.header}}
            <h4 class="smartresponse__info__header">
                {{strings.header}}
            </h4>
        {{/if}}
        <div class="smartresponse__info__summary">
            {{#if summary}}
                {{#if summary.recommendation}}
                    <div class="row">
                        {{html summary.recommendation}}
                    </div>
                {{/if}}
                {{#if summary.products}}
                    <ul class="row">
                        {{#each summary.products}}
                            <li>
                                <a hawksearch-link href="{{url}}" class="search-results-list__item__image" aria-label="{{name}}">
                                    <img hawksearch-image src="{{imageUrl}}" alt="" />
                                </a>
                                <div class="search-results-list__item__title">
                                    <a hawksearch-link href="{{url}}">{{name}}</a>
                                </div>
                            </li>
                        {{/each}}
                    </ul>
                {{else}}
                    {{#if summary.nosources}}
                        <p>{{strings.nosources}}</p>
                    {{/if}}
                {{/if}}
            {{/if}}
        </div>
    </div>
    <div class="smartresponse__actions">
        <div class="switch{{attribute ' on' active}}" smartresponse-switch></div>
    </div>
</span>
Copy