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.