<div class="fractal tooltip-wrapper">
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div class="tooltip flex colored under left">
<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ítulo Tooltip</p>
<div class="
bodycopy-s
">
Este es el texto que muestra el tooltip. Este es el texto que muestra el tooltip.
</div> <a class="link
" href="#">
<span>Enlace</span>
</a>
</div>
</div>
</div>
</div>
{{#if isFractal}}<div class="fractal tooltip-wrapper">{{/if}}
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div{{#if id}} id="{{id}}"{{/if}}
class="tooltip{{#if isContactInfo}} tooltip_contact-info{{/if}} {{#if isFlex}} flex{{/if}}{{#if isColored}} colored{{/if}}{{#if isUnder}} under{{/if}}{{#if isRight}} right{{/if}}{{#if isLeft}} left{{/if}}">
{{ render '@icon--16-tooltip' }}
<div class="msg-tooltip{{#if isContactInfo}} contact-info{{/if}}">
<span class="arrow"></span>
<div class="wrap{{#if isContactInfo}} contact-info{{/if}}">
{{#if isContactInfo}}
{{#if hasLogo}}
<div class="contact-info__logo">
<img class="contact-info__logo__img" src="/dist/images/logo_UCI.png" alt="Logo UCI">
{{> @bodycopy textLogo }}
</div>
{{/if}}
{{> @title-m tit-contact }}
{{#if hasBodycopySOptional}}
{{> @bodycopy bodycopySOptional}}
{{/if}}
<div class="wrap-tel">
{{#each contact}}
<div class="tel">
<div class="tel_detail">
{{> @bodycopy-m tel-contact }}
{{#if iconContact}}
{{> @icon iconContact}}
{{/if}}
</div>
{{> @bodycopy-s item-contact }}
{{#if small-contact}}{{> @bodycopy-xs small-contact }}{{/if}}
</div>
{{/each}}
</div>
{{else}}
{{> @title-s title }}
{{> @bodycopy-s bodycopy }}
{{> @link link }}
{{/if}}
</div>
</div>
</div>
{{#if isFractal}}
</div>{{/if}}
{
"title": {
"text": "Título Tooltip",
"isP": true
},
"bodycopy": {
"text": "Este es el texto que muestra el tooltip. Este es el texto que muestra el tooltip."
},
"link": {
"href": "#",
"text": "Enlace"
},
"tit-contact": {
"text": "Hablamos"
},
"contact": [
{
"tel-contact": {
"text": "Si eres cliente</a>"
},
"item-contact": {
"text": "<a href='mail:clientes@uci.com' target='_blank'>clientes@uci.com</a> · <a href='tel:912063795' target='_blank'>912 06 37 95</a>"
},
"small-contact": {
"text": "L-V 9:00 am - 18:00 pm"
},
"iconContact": {
"name": "16_user-check"
}
},
{
"tel-contact": {
"text": "Si aún no eres cliente</a>"
},
"item-contact": {
"text": "<a href='mail:cuentanos@uci.com' target='_blank'>cuentanos@uci.com</a> · <a href='tel:912063790' target='_blank'>912 06 37 90</a>"
},
"small-contact": {
"text": "L-V 9:00 am - 18:00 pm"
},
"iconContact": {
"name": "16_consultant"
}
}
],
"isFractal": true,
"isFlex": true,
"isLeft": true,
"isUnder": true,
"isColored": true
}
.tooltip-wrapper {
position: relative;
display: inline-block;
}
.tooltip {
position: absolute;
top: -20px;
right: -15px;
.icon-16_tooltip{
fill: var(--color-icon-accent);
cursor:pointer;
}
.msg-tooltip{
z-index:10;
visibility: hidden;
opacity:0;
display: flex;
position: absolute;
top:25px;
left:-98px;
padding:20px;
width: 200px;
background-color: var(--color-white);
-webkit-box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.1);
-moz-box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.1);
box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.1);
.arrow {
top:-30px;
left: 79px;
position: relative;
background-color: var(--color-white);
display: inline-block;
padding: 5px;
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
}
&.contact-info{
width: 290px;
left:-129px;
padding: 40px;
.arrow {
left: calc(50% - 12px);
top:-50px;
}
}
.wrap{
position: relative;
margin-top: -10px;
.link{margin-top:10px;}
.title-s{margin-bottom:10px;}
&.contact-info{
display: flex;
flex-direction: column;
.contact-info__logo {
margin-bottom: 16px;
display: flex;
flex-flow: column;
&__img {
width: 42px;
height: 18px;
margin-bottom: 10px;
}
}
.bodycopy-l{
color: var(--color-accent);
margin-bottom:0;
}
.bodycopy-s{
color: var(--color-text-subtle);
margin-bottom:0;
}
.tel{
display: flex;
flex-direction:column;
position: relative;
padding-top: 32px;
gap: 4px;
.bodycopy-s{
color:var(--color-text-subtle);
a, a:visited, a:focus {
color:var(--color-text-subtle);
}
}
.bodycopy-xs{
color:var(--color-text-subtlest);
}
&_detail {
display:flex;
flex-direction:row;
align-items: flex-start;
padding-top: 32px;
gap:10px;
.icon {
fill:var(--color-icon);
}
}
&::before{
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1px;
background-color: var(--color-border);
content: "";
margin: 32px 0;
}
& + .tel {
padding-top: 16px;
.tel_detail {
padding-top: 0;
}
&::before{
display:none;
margin: 0;
}
}
.bodycopy-m{
color: var(--color-secondary);
margin-bottom:0;
&::after{
display: none;
}
a, a:visited, a:focus{color: var(--color-secondary);}
}
.flag{width: 20px;height: 20px; margin-left: 10px; margin-bottom: 7px;}
.bodycopy-s{
color: var(--color-text-subtle);
}
}
.bodycopy-xs{
color:var(--color-text-subtle);
}
}
}
@media (--viewport-xs-max) {
left:-215px;
top:-15px;
.arrow{
top:-5px;
left:auto;
right:-175px;
}
}
}
&:hover{
.msg-tooltip{
display:block;
opacity:1;
visibility: visible;
}
}
&.flex{display: flex;flex-direction: column; position: relative; padding:20px;max-width:52px; margin-bottom: -40px; margin-left: -20px;
.icon{position: absolute;top:-2px;pointer-events: none}
.msg-tooltip{/* display:flex;*/position:absolute;/*top:10px;*/ top:22px; flex-direction: column; align-items: center;
left:-74px;
.arrow {left:0; right: auto;
bottom: auto;
top:-25px;
height: 16px;
width: 16px;
}
}
.wrap{
margin-top: -15px;
width: 100%;
}
&:hover{
.msg-tooltip{
display: flex;
opacity:1;
visibility: visible;
}
}
&.colored{
.msg-tooltip{
background-color: var(--color-accent-10);
-webkit-box-shadow: 0px 0px 10px 5px rgba(0,0,0,0);
-moz-box-shadow: 0px 0px 10px 5px rgba(0,0,0,0);
box-shadow: 0px 0px 10px 5px rgba(0,0,0,0);
.arrow {
background-color: var(--color-accent-10);
}
}
}
&.under{flex-direction: column-reverse;
.msg-tooltip{/*top:-10px;*/flex-direction: column-reverse;position: absolute;top: auto;left: -74px;bottom: auto;margin-bottom: 30px;
.wrap{
margin-top: 0;
}
.arrow {
top:auto;
bottom:-25px;
}
}
}
&.left{
.msg-tooltip{align-items:flex-start;left: -6px;
.arrow{left:4px;}
}
&.under{
.msg-tooltip{left: -6px;}
}
}
&.right{
.msg-tooltip{align-items:flex-end;left:-141px;right:auto;
.arrow{left:-5px;}
}
&.under{
.msg-tooltip{left:-141px;}
}
}
}
}
No notes defined.