Joomla中其實內建了很好用的Tooltip 工具,大家從網站上的Banner就可以看到。一般來說很多人會去官網套件區 下載專門的tooltip工具來安裝。
不過其實不用那麼麻煩,因為Joomla中早已內建了相關的Tooltip工具 ,同樣基於Mootools 製作,大家在後台應該就可以常常看到這些功能。
但在網站上要如何使用呢? 請照著接下來的教學一步步做吧,非常簡單。
插入Tooltip引擎
首先,打開模板的index.php文件,在檔案的最後面輸入以下程式碼:
<?php
JHTMLBehavior::tooltip
(
)
; ?>
這是為了在header 的地方引入tooltip的相關程式碼
使用Tooltip
然後在你想要顯示tooltip的任何物件(無論是文字、連結、圖片、div皆可) 上加上一個hasTip 的class ,並在title 中輸入你想要顯示的內容。標題與內文用雙冒號 :: 區隔開。
如以下示範:
<p class
="hasTip"
title="測試用::這是測試的tooltip功能"
>滑鼠移上來就會看到tooltip囉</p>
實際效果:
沒有出現外框的時候
絕大多數應該都會出現美美的米黃色外框,因為是這系統內建的CSS。
但有時候少數模板就是沒有出現漂亮外框。此時可以在模板CSS檔案中加入以下程式碼:
-
/* Tooltips =======直接複製到template.css檔案中即可========*/
-
div
.tooltip
{
-
float
:
left
;
-
background
:
#ffc
;
-
border
:
1px
solid
#D4D5AA
;
-
padding
:
5px
;
-
max-width
:
200px
;
-
z-index
:13000
;
-
}
-
-
div
.tooltip
h4
{
-
padding
:
0
;
-
margin
:
0
;
-
font-size
:
95
%
;
-
font-weight
:
bold
;
-
margin-top
: -
15px
;
-
padding-top
:
15px
;
-
padding-bottom
:
5px
;
-
background
:
url
(
'/../images/selector-arrow.png'
)
no-repeat
;
-
}
-
-
div
.tooltip
p
{
-
font-size
:
90
%
;
-
margin
:
0
;
-
}
這樣就能有跟Joomla123的橫幅一樣的提示框效果囉!