Extension Requests • BBaward Badges - CSS Tooltip on Hover

Code:

<?php/**** Badge Award extension for the phpBB Forum Software package.** @copyright (c) 2015 SiteSplat All rights reserved* @license Proprietary**/namespace sitesplat\badge\controller;use sitesplat\badge\conditions\manager;use phpbb\db\driver\driver_interface;use phpbb\template\template;use phpbb\user;use phpbb\request\request;use phpbb\controller\helper;use Symfony\Component\DependencyInjection\Container;class main{/** @var \sitesplat\badge\conditions\manager */protected $manager;/** @var \phpbb\db\driver\driver_interface */protected $db;/** @var ContainerInterface */protected $phpbb_container;/** Template object @var \phpbb\template\template */protected $template;/** User object @var \phpbb\user */protected $user;/** @var \phpbb\request\request */protected $request;/** @var \phpbb\controller\helper */protected $helper;protected $phpbb_root_path;protected $path_helper;/** @var string The database table the badge rules are stored in */protected $badge_rules_table;/** @var string The database table the badge types are stored in */protected $badge_types_table;/** @var string The database table the badge events are stored in */protected $badge_events_table;/** @var string The database table the badges are stored in */protected $badge_badges_table;public function __construct(manager $manager, driver_interface $db, Container $phpbb_container, template $template, user $user, request $request, helper $helper, $phpbb_root_path, \phpbb\path_helper $path_helper, $badge_rules_table, $badge_types_table, $badge_events_table, $badge_badges_table){$this->manager = $manager;$this->db = $db;$this->phpbb_container = $phpbb_container;$this->template = $template;$this->user = $user;$this->request = $request;$this->helper = $helper;$this->root_path = generate_board_url() . '/';$this->path_helper = $path_helper;$this->badge_rules_table = $badge_rules_table;$this->badge_types_table = $badge_types_table;$this->badge_events_table = $badge_events_table;$this->badge_badges_table = $badge_badges_table;}/*** Extension front handler method. This is called automatically when your extension is accessed* through index.php?ext=example/foobar* @return null*/public function handle($route = 'index.html'){$sql = 'SELECT user_id FROM ' . USERS_TABLE . ' WHERE badge_route = "' . preg_replace('/\\.[^.\\s]{3,4}$/', '', $route) . '"';$result = $this->db->sql_query($sql);if (!($row = $this->db->sql_fetchrow($result))){$userid = $this->request->variable('u', 0);$sql = 'SELECT user_id FROM ' . USERS_TABLE . ' WHERE user_id = ' . $userid;$result = $this->db->sql_query($sql);$userid = $this->db->sql_fetchfield('user_id');} else{$userid = $row['user_id'];}// Add the badge ACP lang file$this->user->add_lang_ext('sitesplat/badge', 'badge_acp');$breadcrumb = array($this->user->lang['BADGE_MANAGE'] => $this->helper->route('badge_award_controller', array('route' => 'index.html')),);($route == 'recent.html') ? $breadcrumb += array($this->user->lang['BADGE_RECENT'] => $this->helper->route('badge_award_controller', array('route' => 'recent.html')),) : null;$type_ids = $this->manager->get_rule_type_ids();array_walk($type_ids, function(&$value, $key, $return) {$value = $value[$return];}, 'id');$sql = 'SELECT r.rule_id, r.rule_type_id, r.rule_name, r.rule_description, rule_min_value, rule_max_value, e.user_id, u.username, u.badge_route, s.style_path,   u.user_avatar AS avatar, u.user_avatar_width AS avatar_width, u.user_avatar_height AS avatar_height, u.user_avatar_type AS avatar_type, u.user_colour,    e.date, b.badge, t.rule_type_nameFROM ' . $this->badge_rules_table . ' rLEFT OUTER JOIN ' . $this->badge_events_table . ' e ON e.rule_id = r.rule_idLEFT JOIN ' . $this->badge_types_table . ' t ON t.rule_type_id = r.rule_type_idLEFT JOIN ' . USERS_TABLE . ' u ON u.user_id = e.user_idLEFT JOIN ' . STYLES_TABLE . ' s ON s.style_id = u.user_styleLEFT JOIN ' . $this->badge_badges_table . ' b ON b.badge_id = r.badge_id' . ((!$userid ) ? ' WHERE r.rule_type_id IN (' . implode(',', $type_ids) . ')' : ' WHERE e.user_id = ' . $userid) . ' AND r.rule_type_id IN (' . implode(',', $type_ids) . ')ORDER BY ' . (($route == 'recent.html') ? 't.rule_type_name, e.date DESC LIMIT 100' : 't.rule_type_name, r.rule_id, u.username_clean');$result = $this->db->sql_query($sql);$ruleid = $rulename = '0';if (!$userid ){while ($row = $this->db->sql_fetchrow($result)){if ($rulename != $row['rule_type_name']){$this->template->assign_block_vars('rules', array('CONDITION_NAME'=> $this->manager->get_condition_lang($row['rule_type_name']),'URL'=> $this->Slug($this->manager->get_condition_lang($row['rule_type_name']))));}if ($ruleid != $row['rule_id']){$this->template->assign_block_vars('rules.badge', array('BADGE'=> $this->root_path . 'ext/sitesplat/badge/badges/' . $row['badge'],'GROUP_NAME'=> $row['rule_name'],'DESCRIPTION'=> (($row['rule_type_name'] != 'sitesplat.badge.type.custom') ? $this->manager->get_condition_lang($row['rule_type_name']) . $this->manager->get_condition_type_lang($row['rule_min_value'], $row['rule_max_value'], $row['rule_type_name']) : '') . (($row['rule_description']) ? '<br />' . $row['rule_description'] : '')));}if (!empty($row['username'])){$this->template->assign_block_vars('rules.badge.users', array('USERNAME'=> $row['username'],'USER_ID'=> $row['user_id'],'U_URL'=> $this->helper->route('badge_award_controller', array('route' => (($row['badge_route'] != '') ? $row['badge_route'] . '.html' : 'index.html?u=' . $row['user_id']))),'U_COLOR'=> $row['user_colour'],'AVATAR'=> ($row['avatar']) ? phpbb_get_user_avatar($row) : '<img style="width:34px;height:34px;" src="' . generate_board_url() . '/styles/' . $row['style_path'] . '/theme/images/no_avatar.gif" alt="' . $this->user->lang['USER_AVATAR'] . '">','DATE'=> ($row['date']) ? $this->user->format_date($row['date'], 'j M Y') : '',));}$rulename = $row['rule_type_name'];$ruleid = $row['rule_id'];}} else{while ($row = $this->db->sql_fetchrow($result)){if ($rulename != $row['username']){$breadcrumb += array($this->user->lang['BADGE_USER'] => $this->helper->route('badge_award_controller', array('route' => $row['username'] . '.html')),);$this->template->assign_block_vars('rules', array('CONDITION_NAME'=> $row['username'],));}if ($ruleid != $row['rule_type_id']){$avatar = phpbb_get_user_avatar($row);preg_match( '/src="([^"]*)"/i', $avatar, $match);$this->template->assign_block_vars('rules.badge', array('BADGE'=> ($rulename != $row['username']) ? (($row['avatar'] && isset($match[1])) ? $match[1] : generate_board_url() . '/styles/' . $row['style_path'] . '/theme/images/no_avatar.gif') : '','GROUP_NAME'=> '','DESCRIPTION'=> $this->manager->get_condition_lang($row['rule_type_name'])));}if ($row['rule_id']){$this->template->assign_block_vars('rules.badge.users', array('USERNAME'=> '','USER_ID'=> '','U_URL'=> '','RULETITLE'=> $row['rule_name'],//'DESCR'=> $row['rule_name'] . '<br />' . $row['rule_description'],'DESCR'=> $row['rule_description'],'AVATAR'=> '<img alt="' . $this->manager->get_condition_lang($row['rule_type_name']) . '" title="' . (($row['rule_type_name'] != 'sitesplat.badge.type.custom') ?$this->manager->get_condition_lang($row['rule_type_name']) . $this->manager->get_condition_type_lang($row['rule_min_value'], $row['rule_max_value'], $row['rule_type_name']) : $row['rule_name']) . "\n" . $row['rule_description'] . '" style="margin-top:4px;width:30px;height:30px;" src="' . $this->root_path . 'ext/sitesplat/badge/badges/' . $row['badge'] . '">','DATE'=> ($row['date']) ? $this->user->format_date($row['date'], 'j M Y') : '',));}$rulename = $row['username'];$ruleid = $row['rule_type_id'];}}$this->db->sql_freeresult($result);foreach ($breadcrumb as $i => $value){$this->template->assign_block_vars('navlinks', array('FORUM_NAME'=> $i,'U_VIEW_FORUM'=> $value));}$this->template->assign_vars(array('S_RECENT' => ($route == 'recent.html') ? true : false, 'IN_BADGE' => true, 'IN_USER' => ($userid) ? true : false));// Send all data to the template filereturn $this->helper->render('badge.html', $this->user->lang['BADGE_MANAGE']);}protected function Slug($string){return strtolower(str_replace(array('&','#',';',' '), array('','','','_'), mb_convert_encoding($string, 'HTML-ENTITIES', 'UTF8')));//return strtolower(trim(preg_replace('~[^0-9a-z]+~i', '-', html_entity_decode(preg_replace('~&([a-z]{1,2})(?:acute|cedil|circ|grave|lig|orn|ring|slash|th|tilde|uml);~i', '$1', htmlentities($string, ENT_QUOTES, 'UTF-8')), ENT_QUOTES, 'UTF-8')), '-'));}}

Code:

.has-nanoscr .nano {    height: 230px;    width: 100%;}.block-title small {    font-size: 13px;    font-weight: normal;    text-transform: none;}.block-content {    margin: 0 auto;    max-width: 100%;    overflow-x: visible;    padding: 10px 10px 10px;    transition: opacity 0.2s ease-out 0s;}.block.block-bordered {    border: 2px solid #e9e9e9;    box-shadow: none;}.block.block-bordered .block-header {    border-bottom: 1px solid #e9e9e9;}.block.block-rounded {    border-radius: 4px;}.block.block-rounded .block-header {    border-top-left-radius: 3px;    border-top-right-radius: 3px;}.block.block-rounded .block-content:first-child {    border-top-left-radius: 3px;    border-top-right-radius: 3px;}.block.block-rounded .block-content:last-child {    border-bottom-left-radius: 3px;    border-bottom-right-radius: 3px;}.block.block-themed > .block-header {    border-bottom: medium none;}.block.block-themed > .block-header .block-title {    color: #fff;}.block.block-themed > .block-header .block-title small {    color: rgba(255, 255, 255, 0.75);}.block.block-transparent {    background-color: transparent;    box-shadow: none;}.img-avatar > img {    border-radius: 50%;    display: inline-block;    height: 34px;    width: 34px;}.badges_postrow img {    height: 22px !important;    width: 22px !important;}.badges_postrow {    margin-top: 2px;    position: absolute;}a.block {    color: #646464;    display: block;    font-weight: normal;    transition: all 0.15s ease-out 0s;margin-bottom: 10px;}a.block:hover {    color: #646464;    opacity: 0.9;}a.block.block-link-hover1:hover {    box-shadow: 0 2px rgba(0, 0, 0, 0.1);    opacity: 1;}a.block.block-link-hover1:active {    box-shadow: 0 2px rgba(0, 0, 0, 0.01);}a.block.block-link-hover2:hover {    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);    opacity: 1;    transform: translateY(-2px);}a.block.block-link-hover2:active {    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.05);    transform: translateY(-1px);}a.block.block-link-hover3:hover {    box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);    opacity: 1;}a.block.block-link-hover3:active {    box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);}.badge-row {    margin-bottom: 40px;}.has-popover .popover {    width: 300px;}.has-popover a:focus {    outline: medium none;}.img-badge{    max-width:100px;}@media (min-width: 300px) and (max-width: 467px) {.media-left {    display: inline;}.img-avatar {    margin-left: auto;    margin-right: auto;    width: 100%;}.user_date {    margin-left: auto;    margin-right: auto;    width: 100%;}}

Code:

<!-- INCLUDECSS @sitesplat_badge/animate.min.css --><!-- INCLUDECSS @sitesplat_badge/badge.css --><!-- INCLUDECSS @sitesplat_badge/badge_teaser.css --><!-- INCLUDE overall_header.html --><h2><!-- IF S_RECENT -->{L_BADGE_RECENT}<!-- ELSE -->{L_BADGE_MANAGE}<!-- ENDIF --></h2><p>{L_BADGE_MANAGE_EXPLAIN}</p>  <div class="clearfix">   <div class="pull-left">  {L_BADGE_INTRO} </div>  <div class="pull-right">  <ul class="pagination pagination-sm"><!-- IF S_RECENT --> <li><a href="{U_BADGE_PAGE}">{L_BADGE_MANAGE}</a></li> <!-- ELSE --> <li><a href="{U_RECENT}">{L_BADGE_RECENT}</a></li><!-- ENDIF -->  </ul>   </div></div><div class="badge-panel"> <div class="panel has-nav-tabs no-border"><ul class="nav nav-tabs"><!-- BEGIN rules --> <li class="tab"><a href="#{rules.URL}">{rules.CONDITION_NAME}</a></li><!-- END rules --></ul><div class="panel-content"><div class="panel-body"><!-- BEGIN rules --><div class="badge_award"<!-- IF not IN_USER --> id="{rules.URL}"<!-- ENDIF --> style="display:<!-- IF rules.S_FIRST_ROW -->block<!-- ELSE -->none<!-- ENDIF -->;"><h3>{rules.CONDITION_NAME}</h3><!-- BEGIN badge --><!-- IF badge.BADGE and IN_USER --><div class="media-left"><figure> <img class="img-responsive img-badge thumbnail center-block" src="{badge.BADGE}" alt="{badge.GROUP_NAME}"/>    <figcaption class="text-center">{L_BADGE_WALL_TITLE}</figcaption></figure></div><!-- ENDIF --><!-- END badge --><div class="media-body user_view"> <!-- BEGIN badge --><!-- IF not IN_USER --><div class="media"><!-- ENDIF --> <!-- IF badge.BADGE and not IN_USER -->         <div class="media-left"> <div class="has-popover"> <a tabindex="0" role="button" data-container="body" data-toggle="popover" data-trigger="focus" title="{badge.GROUP_NAME}" data-content="{badge.DESCRIPTION}"><figure>  <img class="img-responsive img-badge thumbnail center-block" src="{badge.BADGE}" alt="{badge.GROUP_NAME}"/> <figcaption class="text-center">{badge.GROUP_NAME}</figcaption></figure></a></div> </div>         <!-- ENDIF -->        <!-- IF not IN_USER --><div class="media-body badge_view"><div class="has-nanoscr"><div class="nano">        <div class="nano-content">    <!-- ENDIF -->         <!-- BEGIN users --> <div class="col-xs-6 col-sm-4 col-md-3<!-- IF not users.USERNAME --> user_view_badge<!-- ENDIF -->">  <a class="block block-bordered text-center block-rounded block-link-hover3"<!-- IF users.USERNAME --> href="{users.U_URL}"<!-- ENDIF -->><div class="block-content block-content-full clearfix"><div class="clearfix"> <div class="pull-right img-avatar">  {users.AVATAR} </div> <div class="pull-left user_date"> <!-- IF users.USERNAME --> <div class="push-5"<!-- IF users.U_COLOR --> style="color:#{users.U_COLOR};font-weight:bold;"<!-- ENDIF -->>{users.USERNAME}</div> <!-- ENDIF --> <div class="text-muted">{users.DATE}</div> </div></div><!-- IF not users.USERNAME --><div class="badge_title"><strong>{users.RULETITLE}</strong></div><div class="badge_description">{users.DESCR}</div><!-- ENDIF --></div>  </a></div>    <!-- END users -->        <!-- IF not IN_USER -->        </div></div></div></div>    <!-- ENDIF --><!-- IF not IN_USER --></div><!-- ENDIF --><!-- END badge --></div></div><!-- END rules --></div></div><div class="panel-footer clearfix"> <small><a class="btn-link pull-right" title="{L_BADGE_LINK_AD_TITLE}" href="http://goo.gl/LvmwlF"><i class="fa fa-trophy fa-lg onstart animated" data-animation="tada" data-animation-delay="4000" aria-hidden="true"></i>&nbsp;{L_BADGE_LINK_AD}</a></small></div></div></div><!-- INCLUDEJS @sitesplat_badge/js/masonry.pkgd.min.js --><!-- INCLUDEJS @sitesplat_badge/js/masonry_init.js --><!-- INCLUDEJS @sitesplat_badge/js/jquery_tabs.js --><!-- INCLUDEJS @sitesplat_badge/js/header_teaser.js --><!-- INCLUDE overall_footer.html -->