Question

当用户将鼠标悬停在某些文字/关键字上时，如何显示工具提示？直接从数据库中检索此文本正文，因此我无法向这些关键字添加任何span或div标记或标题信息。有没有办法自动为页面中包含的某些单词创建工具提示？

如果有任何关于如何解决此问题的好教程，请告诉我。

Answer 1

// Create tooltips dictionary
$tooltips = Array("Word1"=>"This word is word number 1", 
                  "Word2"=>"This word is word number 2");

$content = "Here are Word1 and Word2";
foreach ($tooltips as $word=>$tip){
    $content = preg_replace("/(".$word.")/", "<span title='".$tip."'>$1</span>", $content);
}
echo $content;

Answer 2

我不久前必须这样做。实际上我在这里回答了一个类似的问题：javascript: find strings in dom and emphasize it（花了一些时间来搜索它）。

这是我用来做动态工具提示的东西：

// keyword : tooltip
keywords = {
    'hello world' : 'a common first example program',
    'goodbye cruel world' : 'the opposite of hello world'
};
function insertTooltips (domNode) {
    if (domNode.nodeType === Node.ELEMENT_NODE) { // We only want to scan html elements
        var children = domNode.childNodes;
        for (var i=0;i<children.length;i++) {
            var child = children[i];

            // Filter out unwanted nodes to speed up processing.
            // For example, you can ignore 'SCRIPT' nodes etc.
            if (
                child.nodeName  != 'span' ||
                child.className != 'tooltip_span'
            ) {
                insertTooltips(child); // Recurse!
            }
        }
    }
    else if (domNode.nodeType === Node.TEXT_NODE) { // Process text nodes
        var text = domNode.nodeValue;

        // This is another place where it might be prudent to add filters

        for (var i in keywords) {
          if (keywords.hasOwnProperty(i)) {
            var match = text.indexOf(i); // you may use search instead
            if (match != -1) {
                // This is how you wrap the keyword in a span:

                // create a span:
                var span = document.createElement('SPAN');

                // split text into 3 parts: before, mid and after
                var mid = domNode.splitText(match);
                mid.splitText(i.length);

                // then assign mid part to span
                mid.parentNode.insertBefore(span,mid);
                mid.parentNode.removeChild(mid);
                span.appendChild(mid);

                // now we can assign a mouseover event handler to the span
                span.onmouseover = function(){
                    showToolTip(keywords[i]);
                }

                // give the span a class name to prevent accidental
                // recursion into it:
                span.className = 'tooltip_span';
            }
          }
        }
    }
}

showTooltip函数的实现留给读者练习。

这个想法基本上是使用DOM操作来动态搜索和包装跨度中的关键字，然后将鼠标悬停（或鼠标点击，直到你）处理程序分配给跨度以显示工具提示。在我的网站上，关键字/工具提示哈希/对象是从数据库中提取的数据生成的。

这比尝试使用regexp更加强大，因为它可以防止意外处理与类名，id和脚本标记中的关键字匹配的单词。

Answer 3

实际上你可以使用span或其他任何东西。

您有两个选项，第一个是在'display：none'div或span中的第一页请求中加载工具提示内容，然后只使用onmouseover事件显示它。

第二个选项是执行ajax请求。

你应该看看这个：http://www.smashingmagazine.com/2007/06/12/tooltips-scripts-ajax-javascript-css-dhtml/

添加没有span标签或标题的工具提示/气泡显示

3 个答案: