<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">Label</label>
<div class="field-top__wrap">
<a class="link
link_inline
" href="#">
<span>Link</span>
</a>
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div class="tooltip flex">
<svg class="icon icon-16_tooltip ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_tooltip"></use>
</svg>
<div class="msg-tooltip">
<span class="arrow"></span>
<div class="wrap">
<p class="
title-s
">Títulilllo</p>
<div class="
bodycopy-s
">
Este es el texto.
</div> <a class="link
" href="#">
<span>Enlacillo</span>
</a>
</div>
</div>
</div>
</div>
</div>
{{#if label-option-2}}
<div class="field-top{{#if fieldset}} fieldset{{/if}} form-list__tooltip-label_option_2">
{{> @label-m label-option-2 }}
<div class="field-top__wrap">
{{#if link}}
{{> @link link }}
{{/if}}
{{#if tooltip}}
{{> @tooltip tooltip }}
{{/if}}
</div>
</div>
{{/if}}
<div class="field-top{{#if fieldset}} fieldset{{/if}} form-list__tooltip-label_default">
{{> @label-m label }}
<div class="field-top__wrap">
{{#if link}}
{{> @link link }}
{{/if}}
{{#if tooltip}}
{{> @tooltip tooltip }}
{{/if}}
</div>
</div>
{
"label": {
"text": "Label"
},
"link": {
"isInline": true,
"href": "#",
"text": "Link"
},
"tooltip": {
"isFlex": true,
"isHipotecas": true,
"title": {
"text": "Títulilllo",
"isP": true
},
"bodycopy": {
"text": "Este es el texto."
},
"link": {
"href": "#",
"text": "Enlacillo"
}
}
}
.field-top {
display: flex;
margin-bottom: 4px;
height: 36px;
align-items: flex-end;
justify-content: space-between;
line-height: 2px;
&.fieldset {
justify-content: flex-start;
gap:10px;
}
&__wrap {
display: flex;
margin-bottom: 3px;
flex-direction: row-reverse;
}
.tooltip {
position: relative;
top: -12px;
padding-right: 12px;
right: 0;
line-height: inherit;
.icon {
fill: var(--color-primary-brand);
}
.msg-tooltip {
.arrow {
top: -25px;
}
}
}
a.link + .tooltip {
top: 1px;
padding-right: 20px;
}
.link_inline {
color: var(--color-primary-brand);
}
&__trigger {
margin-left: 8px;
transition: all 0.3s;
&:hover,
&:focus {
opacity: 0.6;
}
}
.label-m {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
/* PARA CAMPOS CON LABEL CONDICIONADO POR OTROS CAMPOS, COMO EN EL APPLICATION FORM (CA)*/
&.form-list__tooltip-label_option_2 {
display: none;
}
/* FIN PARA CAMPOS CON LABEL CONDICIONADO POR OTROS CAMPOS, COMO EN EL APPLICATION FORM (CA)*/
}
No notes defined.