在Joomla中使用內建的Tooltip (彈出式提示框) -优快云博客

本文链接：https://blog.youkuaiyun.com/linwins/article/details/5851845

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

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

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檔案中加入以下程式碼：


 
   
    /* 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
;
   

   
    }