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

本文介绍如何在Joomla中利用内置工具轻松实现Tooltip功能。通过简单步骤,包括在模板文件中插入必要的代码以及如何为元素添加特定类来显示提示信息。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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的橫幅一樣的提示框效果囉!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值