Dicas de contexto
Dicas de contexto
Este componente também conhecido também por tooltips, tem como objetivo ajudar e apoiar o utilizador com informação ou dicas de navegação úteis.
- HTML
- CSS
<div class="row-fluid">
<div class="span4">
<div class="tooltip-wrapper">
Lorem Ipsum
<div class="tool-tip type1">
Lorem
</div>
</div>
</div>
<div class="span4">
<div class="tooltip-wrapper">
Lorem Ipsum
<div class="tool-tip type2">
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
</div>
</div>
</div>
<div class="span4">
<div class="tooltip-wrapper">
Lorem Ipsum
<div class="tool-tip type3">
45
</div>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span4">
<div class="tooltip-wrapper">
Lorem Ipsum
<div class="tool-tip tool-tip-top type1">
Lorem
</div>
</div>
</div>
<div class="span4">
<div class="tooltip-wrapper">
Lorem Ipsum
<div class="tool-tip tool-tip-top type2">
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
</div>
</div>
</div>
<div class="span4">
<div class="tooltip-wrapper">
Lorem Ipsum
<div class="tool-tip tool-tip-top type3">
45
</div>
</div>
</div>
</div>
.row-fluid {
display: table;
width: 100%;
margin: 40px 0 100px 0;
}
.row-fluid .span4 {
width: 33.33%;
display: table-cell;
}
.tooltip-wrapper{
position: relative;
display: inline-block;
font-family: 'karmamedium';
font-size: 18px;
color: #3498DB;
}
.tooltip-wrapper .tool-tip{
position: absolute;
border-radius: 8px;
color: #fff;
text-align: center;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 10px 24px;
font-family: "latoregular";
font-size: 13px;
top: 150%;
display: none;
}
.tooltip-wrapper:hover .tool-tip {
display: block;
}
.tooltip-wrapper .tool-tip:not(.type2):before{
position: absolute;
top: -8px;
left: 15px;
width: 0;
border-bottom: 8px solid #2a2a2a;
border-right: 7px solid transparent;
border-left: 7px solid transparent;
content: " ";
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.tooltip-wrapper .tool-tip.type1{
background: #2A2A2A;
color: #fff;
min-width: 114px;
}
.tooltip-wrapper .tool-tip.type2{
background: #fff;
color: #555555;
border: 2px solid #808184;
min-width: 240px;
}
.tooltip-wrapper .tool-tip.type2:before,
.tooltip-wrapper .tool-tip.type2:after {
content: "";
position: absolute;
border-left: 9px solid transparent;
border-right: 9px solid transparent;
top: -8px;
left: 15px;
}
.tooltip-wrapper .tool-tip.type2:before{
border-bottom: 8px solid #808184;
margin-top: -2px;
}
.tooltip-wrapper .tool-tip.type2:after{
border-bottom: 9px solid #fff;
margin-top: 0px;
z-index: 1;
}
.tooltip-wrapper .tool-tip.type3{
background: #2980B9;
color: #fff;
min-width: 37px;
padding: 10px 11px;
left: 50%;
transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
}
.tooltip-wrapper .tool-tip.type3:before{
left: 50%;
transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
border-bottom: 8px solid #2980b9;
}
.tooltip-wrapper .tool-tip.tool-tip-top{
top: initial;
bottom: 150%;
}
.tooltip-wrapper .tool-tip.tool-tip-top:not(.type2):before{
bottom: -8px;
border-top: 8px solid #2a2a2a;
border-bottom: 0px;
top: initial;
}
.tooltip-wrapper .tool-tip.tool-tip-top:not(.type2).type3:before{
border-top: 8px solid #2980b9;
border-bottom: 0px;
}
.tooltip-wrapper .tool-tip.tool-tip-top.type2:before,
.tooltip-wrapper .tool-tip.tool-tip-top.type2:after{
top: initial;
bottom: -10px;
}
.tooltip-wrapper .tool-tip.tool-tip-top.type2:after {
border-top: 9px solid #fff;
border-bottom: 0px;
margin-bottom: 2px;
}
.tooltip-wrapper .tool-tip.tool-tip-top.type2:before{
border-top: 8px solid #808184;
border-bottom: 0px;
}
Este website utiliza cookies. Ao continuar a navegação está a aceitar a sua utilização.
Caso pretenda saber mais, consulte a nossa política de privacidade.