<style>
.tooltips-example-js {
padding-top: 50px;
padding-left: 00px;
}
.tooltips-example-js .msg-tooltip {
visibility: visible;
opacity: .5;
}
.tooltips-example-js .col-xs-4.col-ms-4.col-lg-4 {
margin-bottom: 300px;
}
@media (max-width: 592px) {
.tooltips-example-js {
padding-top: 50px;
padding-left: 0;
}
}
</style>
<div class="tooltips-example tooltips-example-js">
<div class="container">
<div class="row">
<div class="col-xs-4 col-ms-4 col-lg-4">
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div class="tooltip flex colored under right">
<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>
<div class="col-xs-4 col-ms-4 col-lg-4">
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div class="tooltip flex colored under">
<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>
<div class="col-xs-4 col-ms-4 col-lg-4">
<!-- 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>
</div>
<div class="row">
<div class="col-xs-4 col-ms-4 col-lg-4">
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div class="tooltip flex colored right">
<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>
<div class="col-xs-4 col-ms-4 col-lg-4">
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div class="tooltip flex colored">
<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>
<div class="col-xs-4 col-ms-4 col-lg-4">
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div class="tooltip flex colored 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>
</div>
</div>
</div>
<style>
.tooltips-example-js {
padding-top: 50px;
padding-left: 00px;
}
.tooltips-example-js .msg-tooltip {
visibility: visible;
opacity: .5;
}
.tooltips-example-js .col-xs-4.col-ms-4.col-lg-4 {
margin-bottom: 300px;
}
@media (max-width: 592px) {
.tooltips-example-js {
padding-top: 50px;
padding-left: 0;
}
}
</style>
<div class="tooltips-example tooltips-example-js">
<div class="container">
<div class="row">
<div class="col-xs-4 col-ms-4 col-lg-4">
{{> @tooltip tooltip6 }}
</div>
<div class="col-xs-4 col-ms-4 col-lg-4">
{{> @tooltip tooltip5 }}
</div>
<div class="col-xs-4 col-ms-4 col-lg-4">
{{> @tooltip tooltip4 }}
</div>
</div>
<div class="row">
<div class="col-xs-4 col-ms-4 col-lg-4">
{{> @tooltip tooltip3 }}
</div>
<div class="col-xs-4 col-ms-4 col-lg-4">
{{> @tooltip tooltip2 }}
</div>
<div class="col-xs-4 col-ms-4 col-lg-4">
{{> @tooltip tooltip1 }}
</div>
</div>
</div>
</div>
{
"tooltip1": {
"isColored": true,
"isFlex": true,
"isLeft": true,
"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"
}
},
"tooltip2": {
"isColored": true,
"isFlex": true,
"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"
}
},
"tooltip3": {
"isColored": true,
"isFlex": true,
"isRight": true,
"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"
}
},
"tooltip4": {
"isColored": true,
"isFlex": true,
"isLeft": true,
"isUnder": true,
"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"
}
},
"tooltip5": {
"isColored": true,
"isFlex": true,
"isUnder": true,
"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"
}
},
"tooltip6": {
"isColored": true,
"isFlex": true,
"isRight": true,
"isUnder": true,
"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"
}
},
"tooltip7": {
"isFlex": true,
"isLeft": true,
"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"
}
},
"tooltip8": {
"isFlex": true,
"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"
}
},
"tooltip9": {
"isFlex": true,
"isRight": true,
"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"
}
},
"tooltip10": {
"isFlex": true,
"isLeft": true,
"isUnder": true,
"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"
}
},
"tooltip11": {
"isFlex": true,
"isUnder": true,
"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"
}
},
"tooltip12": {
"isFlex": true,
"isRight": true,
"isUnder": true,
"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"
}
}
}
.tooltips-example-js{
}
No notes defined.