我有一个包含大量技术内容的PHP网站。我为网站上使用的一些比较晦涩的术语创建了词汇表。我希望每当用户将鼠标悬停在这些术语中的任何一个上时,都会显示工具提示(或提示气泡,无论它们被称为什么)。自定义词汇表的自动网站工具提示?
我发现了大量的jQuery扩展,它们似乎按照我想要的方式工作,但他们需要通过将span
标记设置为特定的类来手动链接到每个术语实例。
我希望这个自动完成。我应该如何继续?
我有一个包含大量技术内容的PHP网站。我为网站上使用的一些比较晦涩的术语创建了词汇表。我希望每当用户将鼠标悬停在这些术语中的任何一个上时,都会显示工具提示(或提示气泡,无论它们被称为什么)。自定义词汇表的自动网站工具提示?
我发现了大量的jQuery扩展,它们似乎按照我想要的方式工作,但他们需要通过将span
标记设置为特定的类来手动链接到每个术语实例。
我希望这个自动完成。我应该如何继续?
我建议做这个服务器端。当页面上有很多元素时,jQuery插件会减慢页面的速度。 你可能会得到这样的:
$content = "<p>Lorem ajax ipsum</p>";
$terms = array(
'ajax' => 'Asynchronous JavaScript and XML',
);
foreach ($terms as $term => $explained) {
$content = str_replace($term, '<acronym title="' . htmlspecialchars($explained) . '">' . $term . '</acronym>', $content);
}
我建过sroes'的答案,但需要解决两个问题:
这个例子可能会改进一个正则表达式或其他方式来删除嵌套的foreach循环,建议欢迎 - 但请记住在stritr中的序列替换。
function add_glossary_tooltips($text) {
global $glossary;
if(empty($glossary))
return $text;
// Create array of replacements, using only individual
// words surrounded by spaces or other punctuation
$endings = array(
'.',
' ',
',',
'!',
'-',
'?',
'&',
);
$beginnings = array(
'-',
' ',
);
$replacements = array();
foreach ($glossary as $entry) {
$clean_defintion = htmlentities(strip_tags($entry['definition']), ENT_QUOTES);
$replacement = "<abbr
class='tooltip'
title='".$clean_defintion."'
>"
.$entry['glossary_word']
."</abbr>";
foreach ($endings as $ending) {
foreach ($beginnings as $beginning) {
$replacements[$beginning.$entry['glossary_word'].$ending] = $beginning.$replacement.$ending;
}
}
}
$text = stritr($text, $replacements);
return $text;
}
这受自定义不区分大小写的strstr支持。 (不是我的工作)
function stritr($string, $one = NULL, $two = NULL){
/*
stritr - case insensitive version of strtr
Author: Alexander Peev
Posted in PHP.NET
*/
if( is_string($one) ){
$two = strval($two);
$one = substr( $one, 0, min(strlen($one), strlen($two)) );
$two = substr( $two, 0, min(strlen($one), strlen($two)) );
$product = strtr( $string, (strtoupper($one) . strtolower($one)), ($two . $two) );
return $product;
}
else if( is_array($one) ){
$pos1 = 0;
$product = $string;
while( count($one) > 0 ){
$positions = array();
foreach( $one as $from => $to ){
if( ( $pos2 = stripos($product, $from, $pos1) ) === FALSE ){
unset( $one[ $from ] );
}
else{
$positions[ $from ] = $pos2;
}
}
if( count($one) <= 0 )break;
$winner = min($positions);
$key = array_search( $winner, $positions );
$product = ( substr( $product, 0, $winner ) . $one[$key] . substr( $product, ($winner + strlen($key)) ) );
$pos1 = ( $winner + strlen($one[$key]) );
}
return $product;
}
else{
return $string;
}
}/* endfunction stritr */
+1为服务器端解决方案。但你仍然需要添加一些样式,或者甚至是一个简单的JS函数来显示悬停时的工具提示。 – Leron
实际上,浏览器自动使用'title'属性来显示悬停时的工具提示。 – sroes