Using core Bootstrap tooltip at your front-end

concrete5 uses twitter bootstrap for admin pages, so core files contain all files required for using bootstrap tooltip. But for using them on your front-end pages, you need to bring 2 files to your page. Suppose you have a single page, and you want to guide users through some of the options with a tooltip description. Go through these steps to simply add a tooltip to your page:

1- Stylesheets required for tooltips are at the \concrete\css\ccm.app.css, but include this 175K file into your interface is not necessary, so create a file name bootstrap.tooltip.css at root css folder, and copy these lines of css (extracted form mentioned file) into it:

.tooltip{
    position:absolute;
    z-index:1020;
    display:block;
    visibility:visible;
    padding:5px;
    font-size:11px;
    opacity:0;
    filter:alpha(opacity=0)
}
.tooltip.in{
    opacity:.8;
    filter:alpha(opacity=80)
}
.tooltip.top{
    margin-top:-2px
}
.tooltip.right{
    margin-left:2px
}
.tooltip.bottom{
    margin-top:2px
}
.tooltip.left{
    margin-left:-2px
}
.tooltip.top .tooltip-arrow{
    bottom:0;
    left:50%;
    margin-left:-5px;
    border-left:5px solid transparent;
    border-right:5px solid transparent;
    border-top:5px solid #000
}
.tooltip.left .tooltip-arrow{
    top:50%;
    right:0;
    margin-top:-5px;
    border-top:5px solid transparent;
    border-bottom:5px solid transparent;
    border-left:5px solid #000
}
.tooltip.bottom .tooltip-arrow{
    top:0;
    left:50%;
    margin-left:-5px;
    border-left:5px solid transparent;
    border-right:5px solid transparent;
    border-bottom:5px solid #000
}
.tooltip.right .tooltip-arrow{
    top:50%;
    left:0;
    margin-top:-5px;
    border-top:5px solid transparent;
    border-bottom:5px solid transparent;
    border-right:5px solid #000
}
.tooltip-inner{
    max-width:200px;
    padding:3px 8px;
    color:#fff;
    text-align:center;
    text-decoration:none;
    background-color:#000;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px
}
.tooltip-arrow{
    position:absolute;
    width:0;
    height:0
}

2- Add these lines at the end of your page:

This will add tooltip to all elements that have the class name of ‘launch-tooltip’.

Remember you can customize the tooltip with options, to see all the options provided for this plugin, you can check twitter bootstrap help here.