Joomla!-开源天空

为了在Joomla 1.5 使用tooltip，首先要引入tooltip behavior,仅需要以下一行代码就激活了tooltip:

JHTML::_('behavior.tooltip');

最简单创建tooltip的方式就是使用JHtml::tooltip函数，方法的具体文档在这里：

http://api.joomla.org/Joomla-Framework/HTML/JHTML.html#tooltip（仅作参考吧，api文档已经过时了）

function tooltip($selector='.hasTip', $params = array())

这是tooltip函数的定义，第一个参数是css的selector,$params指定了关于tooltip参数。

$params中重要的参数如下：
maxTitleChars:最大的title长度，默认是50
showDelay，hideDelay:显示和隐藏的延迟时间，默认是空
className：css类名称
onShow，onHide:设置提示弹出和隐藏触发事件，可以设置tooltip的特效。

在使用的时候最简单的方法如下，在模板文件中：

<span class="hasTip" title="display title">
  <a href="/" mce_href="/" >show tooltip</a>
<span>

鼠标滑动到"show tooltip"字符上面的时候，就会弹出提示。你可以设置tooltip的css从而改变显示的界面。

这是一个tooltip的css 示例

/* Tooltips */
.tool-tip {
 float: left;
 background: #ffc;
 border: 1px solid #D4D5AA;
 padding: 5px;
 max-width: 200px;
}

.tool-title {
 padding: 0;
 margin: 0;
 font-size: 100%;
 font-weight: bold;
 margin-top: -15px;
 padding-top: 15px;
 padding-bottom: 5px;
 background: url(../images/selector-arrow.png) no-repeat;
}

.tool-text {
 font-size: 100%;
 margin: 0;
}

如果你不满意显示的效果还可以设置onShow，onHide来增加一些趣味。

---

收藏此文章：