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.

Lorem Ipsum
Lorem
Lorem Ipsum
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
Lorem Ipsum
45
Lorem Ipsum
Lorem
Lorem Ipsum
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
Lorem Ipsum
45
Código
Ocultar Código
  • 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;
}