有没有办法在yii中为CTabView选项卡添加工具提示？

Question

我需要为标签添加工具提示。有没有办法在yii中为CTabView选项卡添加工具提示？

Answer 1

我是通过fn属性扩展jQuery对象的功能来完成的。

在视图文件中：

<?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> 

一些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" */
}

工作demo。唯一的事情是：我改变了代码，因为我用'mouseenter'事件取代了'mouseover'。