This is the documentation for concrete5 version 5.6 and earlier. View Current Documentation

Concrete5 uses twitter bootstrap for admin pages, so core files contain all files required for using bootstrap tooltip. But for using them in your front-end pages you need to include 2 files in 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 nice 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:

<style type="text/css">@import "<?php echo DIR_REL ?>/css/bootstrap.tooltip.css";</style>
<script type="text/javascript" src="<?php echo ASSETS_URL_JAVASCRIPT?>/bootstrap/bootstrap.tooltip.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $(".launch-tooltip").tooltip();
});
</script>

This will add tooltip to all elements that has class name ‘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.

Loading Conversation