在Joomla中使用內建的Tooltip (彈出式提示框)

2009-07-31 週五 00:27 Asika Joomla應用 - 特殊應用 [转换为简体]
(3 次投票)

image

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>

 

實際效果：

滑鼠移上來就會看到tooltip囉

 

沒有出現外框的時候

絕大多數應該都會出現美美的米黃色外框，因為是這系統內建的CSS。

但有時候少數模板就是沒有出現漂亮外框。此時可以在模板CSS檔案中加入以下程式碼：

  1. /* Tooltips =======直接複製到template.css檔案中即可========*/
  2. div.tooltip {
  3.   float: left;
  4.   background: #ffc;
  5.   border: 1px solid #D4D5AA;
  6.   padding: 5px;
  7.   max-width: 200px;
  8.   z-index:13000;
  9. }
  10.  
  11. div.tooltip h4 {
  12.   padding: 0;
  13.   margin: 0;
  14.   font-size: 95%;
  15.   font-weight: bold;
  16.   margin-top: -15px;
  17.   padding-top: 15px;
  18.   padding-bottom: 5px;
  19.   background: url('/../images/selector-arrow.png') no-repeat;
  20. }
  21.  
  22. div.tooltip p {
  23.   font-size: 90%;
  24.   margin: 0;
  25. }

 

這樣就能有跟Joomla123的橫幅一樣的提示框效果囉！


建立0rz短址
Related Posts with Thumbnails

文章回應

avatar seacen
+3
 
 
wa! joomla还真是强大便捷啊！
週三 23 十二月 2009, 07:29
avatar kk64
0
 
 
Asika提供了許多資訊，對我而言非常實用，有機會我也一一嘗試。
tooltip我很喜歡使用，不過我的網頁上在顯示tooltip時，文字全部成一行，只有內文而沒有title，有點傷腦筋。不知道問題出在哪裡？
我的網頁儲放在Webhostingpad，安裝的是Joomla! 1.5.17 Stable！
週三 02 六月 2010, 02:46
avatar kk64
0
 
 
解決了！
應該是安裝了太多外掛，衝突。
刪除部分外掛後就正常顯示了。
週三 02 六月 2010, 20:30
請登入後回應