Tooltips are implemented in the Boonex Dolphin 7 social network software but are not documented. Moreover, they are not called tooltips in Dolphin 7 nor are they implemented using the fairly common paradigm of converting the (X)HTML title attribute into a stylized tooltip as is done by the TipTip jQuery plugin and others. This post describes how they are implemented in Dolphin 7 and how they can be configured and stylized.
Here is an example of a tooltip in Dolphin 7:
Tooltips are implemented using JavaScript and a non-native attribute called float_info. Here is an example of this attribute being used as seen from the Firebug debugger.
The actual JavaScript code that implements the tooltip functionality is located at ../inc/js/jquery.float_info.js. As you can see, it is a fairly simple but elegant implementation of tooltip functionality.
/*
* Floating description plugin.
* Just add float_info attribute to your element.
*/
$(document).ready(function() {
// if float_info element doesn't exist
if (!$('#float_info').length) {
//create the element in the root of body
$('body').prepend(
$('<div id="float_info"></div>').css({
display: 'none',
position: 'absolute',
zIndex: 1010
})
);
}
var $tip = $('#float_info');
var $tip = $('#float_info');
// passive listen of mouse moves
$('body').mousemove(function(e) {
var $t = $(e.target);
if ($t.attr('float_info')) {
var p = getPositionData($tip[0], e);
$tip
.css({
left: p.posX,
top: p.posY
})
.html($t.attr('float_info'))
.show();
} else
$tip.hide();
});
});/templates/base/css
I am not going to explain the above code to you as I assume you are somewhat familiar with JavaScript and jQuery if you are reading this post.
As seems to be fairly common with Boonex source code, some of the codebase is excellent and well organized and some of the codebase is poor and badly organized. In Dolphin 7, there are two main subdirectories where you will find JavaScript code. These are:
../plugins/jquery ../inc/js
Why the jquery.float_info.js was placed in ../inc/js instead of ../plugins/jquery is a mystery, unless Boonex decided to reserve the ../plugins/jquery directory for externally developed plugins and the ../inc/js directory for internally developed jquery plugins and other JavaScript code.
The visual appearance of the Dolphin 7 tooltip can be controlled using CSS. The relevant CSS rules are located in ..//templates/base/css/forms_adv.css. Here are the rules used to display the tooltip shown above.
#float_info {
background-color: #FFFFD7;
border: 1px solid #CCCCCC;
padding: 3px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
max-width: 200px;
}
Unfortunately, the float_info paradigm is not consistently implemented across the Dolphin 7 codebase. It is not used anywhere to replace the native tooltips. For example tooltips for individual avatar pictures and whether the user is online or not are implemented using the native HTML title attribute as shown below.
<div class="thumbnail_block" style="float:__sys_thb_float__;width:__sys_thb_width__px;height:__sys_thb_height__px;">
<div class="thumbnail_image" style="width:__sys_img_width1__px;height:__sys_img_height1__px;">
<a href="__usr_profile_url__" onmouseover="javascript:startUserInfoTimer( __iProfId__, $(this).find('.sys-online-offline:first') )" onmouseout="javascript:stopUserInfoTimer(__iProfId__)">
<a href="__usr_profile_url__" >
<img src="<bx_image_url:spacer.gif />" style="background-image:url(__usr_thumb_url0__);" width="__sys_img_width__" height="__sys_img_height__" alt="__usr_thumb_title0__" title="__usr_thumb_title0__" />
<img src="__sys_status_url__" alt="__sys_status_title__" title="__sys_status_title__" class="sys-online-offline" onclick="showFloatUserInfo(__iProfId__, $(this)); return false;" width="__sys_status_img_width__" height="__sys_status_img_height__" />
<img src="__sys_status_url__" alt="__sys_status_title__" title="__sys_status_title__" class="sys-online-offline" width="__sys_status_img_width__" height="__sys_status_img_height__" />
</a>
</div>
</div>
<bx_if:profileLink>
<div class="thumb_username" style="width:__picWidth__px;"><a href="__usr_profile_url__">__nickName__</a></div>
</bx_if:profileLink>
Fortunately these are easy to find and convert to using the float_info attribute.
Support for button tooltips is missing in Dolphin 7. However, again, this is easy to fix. You just need to add one line to the genInputButton() function in ../templates/base/scripts/BxBaseFormView.php as shown here:
function genInputButton(&$aInput) {
$aAttrs = $aInput['attrs'];
$aAttrs['class'] = "form_input_{$aInput['type']}" . (isset($aAttrs['class']) ? (' ' . $aAttrs['class']) : '');
$aAttrs['type'] = $aInput['type'];
$aAttrs['name'] = $aInput['name'];
$aAttrs['value'] = $aInput['value'];
// FPM - add this line of code
$aAttrs['float_info'] = $aInput['info'];
if (isset($aInput['label']))
$aAttrs['id'] = $this->getInputId($aInput);
.....
}
Note that Dolphin 7 uses info instead of float_info within most of the codebase to denote a float_info attribute. Another inconsistency!
Here is an example of using this new facility to add a tooltip to the the Login button by adding the indicated line of code to the getMemberLoginFormCode() function in ../ind/design.inc.php:
function getMemberLoginFormCode($sID = 'member_login_form', $sParams = 'no_join_text')
{
......
$aForm = array(
.....
0 => array(
'type' => 'submit',
'name' => 'LogIn',
// FPM - add this line of code
'info' => _t('_Press this button after entering your user name and password'),
'caption' => '',
'value' => _t('_Login'),
),
.....
);
.....
}
This example shows how to add in a string from a language file. If you do not need localization just enter a regular text string, i.e.
'info' => 'Press this button after entering your user name and password',
and here is the resulting tooltip:
One of the advantages of the Dolphin 7 tooltips is that they are dynamic, i.e. tooltips are created as needed, as opposed to just being created when the page is first rendered. This is not the case with many of the existing jQuery-based tooltip plugins, including the previosly mentioned TipTips plug-in, which do not handle dynamically created page sections.
Dolphin 7 also makes use of the jQuery–ui plug-in. Currently, this plug-in does not have support for tooltips. However work is well underway to add support for tooltips in the next version of jQuery-ui, i.e. 1.9. If you are interested in learning more about this forthcoming tooltip support in jQuery-ui, see this wiki page. It will be interesting to see if Boonex changes to using the jQuery-ui tooltip support when it is released. This obviously is the way to go longterm.
P.S. Please let me know if I missed any important information about tooltips in Dolphin 7 and I will update this post. Developer documentation for this particular software is sorely missing!
