Popover Old

No notes defined.

<!-- Default -->
<div class="sds-popover popover fade  show" role="tooltip" data-step="step" data-placement="">
    <span class="arrow" data-popper-arrow aria-hidden="true"></span>

    <div class="popover-body">
        <div class="sds-stackMd sds-textBodyLg">
            <p>
                <span class="d-block">
                    <span class="h2 sds-colorInherit"></span>/4
                </span>
                Changez de type d’action, lorem ipsum dolor sit amet.
            </p>
            <div class="sds-btnGroup">

                <button type="button" class="sds-btn -iconBtn -btnSecondary -btnInverse">

                    <span class="sds-icon sds-icon-arrowprevious"></span>

                </button>

                <button type="button" class="sds-btn -iconBtn -btnSecondary -btnInverse">

                    <span class="sds-icon sds-icon-arrownext"></span>

                </button>
            </div>
        </div>
    </div>
</div>


<!-- Feedback -->
<div class="sds-popover popover fade  show" role="tooltip" data-step="step" data-placement="">
    <span class="arrow" data-popper-arrow aria-hidden="true"></span>
    <h3 class="popover-header"></h3>
    <div class="popover-body">
        <div class="sds-stackMd">
            <p class="sds-textBold sds-textHelper">
                Ce guide vous a-t-il été utile?
            </p>
            <div class="sds-captcha">
                <div class="sds-captcha__inner">

                    <button type="button" class="sds-badgeSelector -cta sds-captcha__selectorShape -cta">

                        <span class="sds-icon sds-icon-smileythrilled"></span>

                    </button>

                    <button type="button" class="sds-badgeSelector -cta sds-captcha__selectorShape -cta">

                        <span class="sds-icon sds-icon-smileysatisfied"></span>

                    </button>

                    <button type="button" class="sds-badgeSelector -cta sds-captcha__selectorShape -cta">

                        <span class="sds-icon sds-icon-smileysindifferent"></span>

                    </button>

                    <button type="button" class="sds-badgeSelector -cta sds-captcha__selectorShape -cta">

                        <span class="sds-icon sds-icon-smileydisappointed"></span>

                    </button>

                    <button type="button" class="sds-badgeSelector -cta sds-captcha__selectorShape -cta">

                        <span class="sds-icon sds-icon-smileyunderwhelmed"></span>

                    </button>

                </div>
                <div class="sds-captcha__error invalid-feedback">
                    captcha error message
                </div>
            </div>
        </div>
    </div>
</div>


<!-- Reset -->
<div class="sds-popover popover fade  show" role="tooltip" data-step="step" data-placement="">
    <span class="arrow" data-popper-arrow aria-hidden="true"></span>
    <h3 class="popover-header"></h3>
    <div class="popover-body">
        <div class="sds-stackMd">
            <p class="sds-textBold sds-textHelper">
                Merci pour votre participation
            </p>
            <button type="button" class="sds-btn -btnSecondary -btnInverse">

                <span class="sds-icon sds-icon-reload"></span>

                <span class="sds-btn__text">Relancer le Guide</span>

            </button>
        </div>
    </div>
</div>


<!-- Default -->
<div class="{{ namespace }}popover popover fade {% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}"{% if inlineStyles %} style="{{ inlineStyles }}"{% endif %}role="tooltip" data-step="step{{ step }}" data-placement="{{ placement }}" {% if imgSrc %} data-img-src="{{ imgSrc }}"{% endif %}>
	<span class="arrow" data-popper-arrow aria-hidden="true"></span>
	{% if title %}
		<h3 class="popover-header">{{ title }}</h3>
	{% endif %}
	<div class="popover-body">
		<div class="{{ namespace }}stackMd {{ namespace }}textBodyLg">
			<p>
				<span class="d-block">
					<span class="h2 {{ namespace }}colorInherit">{{ step }}</span>/4
				</span>
				Changez de type d’action, lorem ipsum dolor sit amet.
			</p>
			<div class="{{ namespace }}btnGroup">
				{% if first %}
				{% else %}
				{% render "@icon-btn-secondary-inverse",{
					icon: "icon-arrowprevious",
					attrs: popoverAttrsPrevious
				},true %}
				{% endif %}
				{% render "@icon-btn-secondary-inverse",{
					icon: "icon-arrownext",
					attrs: popoverAttrsNext
				},true %}
			</div>
		</div>
	</div>
</div>

<!-- Feedback -->
<div class="{{ namespace }}popover popover fade {% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}"{% if inlineStyles %} style="{{ inlineStyles }}"{% endif %}role="tooltip" data-step="step{{ step }}" data-placement="{{ placement }}">
	<span class="arrow" data-popper-arrow aria-hidden="true"></span>
	<h3 class="popover-header"></h3>
	<div class="popover-body">
		<div class="{{ namespace }}stackMd">
			<p class="{{ namespace }}textBold {{ namespace }}textHelper">
				Ce guide vous a-t-il été utile?
			</p>
			{% render "@captcha--cta",captchaOptions,true %}
		</div>
	</div>
</div>

<!-- Reset -->
<div class="{{ namespace }}popover popover fade {% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}"{% if inlineStyles %} style="{{ inlineStyles }}"{% endif %}role="tooltip" data-step="step{{ step }}" data-placement="{{ placement }}">
	<span class="arrow" data-popper-arrow aria-hidden="true"></span>
	<h3 class="popover-header"></h3>
	<div class="popover-body">
		<div class="{{ namespace }}stackMd">
			<p class="{{ namespace }}textBold {{ namespace }}textHelper">
				Merci pour votre participation
			</p>
			{% render "@btn-secondary-inverse--icon-left",{
				icon: "icon-reload",
				text: "Relancer le Guide",
				attrs: popoverAttrsPrevious
			},true %}
		</div>
	</div>
</div>