Is there way to add tooltip for CTabView tabs in yii? - php

Question

I need to add tooltip for tabs. Is there way to add tooltip for CTabView tabs in yii?

Answer 1

I've done it by extending the functionality of the jQuery object thru the fn property.
In view file:
<?php
Yii::app()->clientScript->registerScript('jquery-tooltip', '
$.fn.tooltip = function(tooltip_text)
{
// Mouse enters the target element
$(this).on("mouseenter", function()
{
// Make the tooltip visible
$("#tooltip").css("display", "inline");
// Set custom text
$("#tooltip").text(tooltip_text);
// Start listening to the mousemove event, memory is allocated for it
$(this).on("mousemove", function(event) {
var x = event.pageX; // get mouse X position relative to the page (screen)
var y = event.pageY; // get mouse Y position
x = x + 32; // move it to the right from the cursor
y = y - 16; // move it up
$("#tooltip").css( {left: x, top: y} );
});
});
// Mouse leaves the target element
$(this).off("mouseout", function()
{
// Stop listening to the mousemove event, memory is released
$(this).off("mousemove");
});
$(this).on("mouseout", function()
{
// Hide the tooltip
$("#tooltip").css("display", "none");
});
}
$(document).ready(function()
{
$("a[href=\'#tab1\']").tooltip("tooltip text1");
$("a[href=\'#tab2\']").tooltip("tooltip text2");
});
' , CClientScript::POS_END );
?>
<div id = "tooltip" '></div>
Some CSS:
#tooltip {
position: absolute;
width: auto;
display: inline;
padding: 8px;
font-family: Arial;
font-size: 14px;
color: #777777;
font-weight: bold;
border: 1px solid silver;
background: #FFFFEE; /* Slightly yellow background */
border-radius: 5px; /* Rounded corners */
box-shadow: 5px 5px 10px #DDD; /* Tooltip shadow */
z-index: 30000; /* A very large z-index ensures
it's "always on top" */
}
The working demo. The only thing: i've changed in the code in that i've replaced 'mouseover' with 'mouseenter' event.