在將鼠標懸停在文本上時顯示工具提示

Question

當用戶將鼠標懸停在某些文本上時，如何顯示工具提示？ 這些文本是關鍵字。 我不想為每個關鍵字手動添加這些工具提示 。 我正在尋找一種創建某種腳本的方法，以在客戶端或服務器端自動執行此操作。 當用戶將鼠標懸停在這些關鍵字上時，如果該關鍵字存在於數據庫或數組中，則應從數據庫中檢索信息。

請讓我知道是否有任何有關如何解決此問題的優秀教程。

Answer 1

有許多有用的插件可以創建漂亮的工具提示。

我知道其中兩個使用jQuery框架：

• mb-tooltip ：[ http://pupunzi.open-lab.com/mb-jquery-components/mb-tooltip/]
• jquery-plugin-tooltip ：[ http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/]

您必須用span元素和一個類將關鍵字括起來才能應用jQuery選擇器。 也許最好在服務器端查詢關鍵字存在，以創建用於顯示正確工具提示的臨時html代碼，否則，您必須以AJAX方式創建工具提示，以處理關鍵字上的鼠標懸停事件。

Answer 2

您還可以使用YUI替代JQuery插件。 這是您要使用YUI的簡單工具提示示例的示例

Answer 3

您可以考慮使用HTML全局標題Attribute 。 如果您正在尋找HTML內置的簡單內容（因此可以在沒有插件的情況下在PHP中使用），那將是我的首選解決方案。 我正在考慮自己在項目中使用它。

Answer 4

有一個非常流行的Jquery插件“ Beauty Tips”：

http://www.lullabot.com/files/bt/bt-latest/DEMO/index.html

帶有選項的美容秘訣示例：

$('#example3').bt({
  contentSelector: "$(this).attr('href')",
  fill: 'red',
  cssStyles: {color: 'white', fontWeight: 'bold'},
  shrinkToFit: true,
  padding: 10,
  cornerRadius: 10,
  spikeLength: 15,
  spikeGirth: 5,
  positions: ['left', 'right', 'bottom']
});

Answer 5

使用jQuery工具提示插件，可以在此處找到。

代碼如下：

$("img[title]").tooltip()