将鼠标悬停在文字中的单词上

Question

What would be the best way to display a hover popup with a 20-30 words definition of each word in a foreign-language text? 在外语文本中显示每个单词的20-30个字定义的悬停弹出窗口的最佳方法是什么？

Right now I am using an iframe: 现在我正在使用iframe：

<span class="tooltip">foreign-language-verb

  <span class="tooltiptext">

    2nd pers. sing. past tense, active mood.

    <iframe class="tooltip" src="general_dictionary_definition_of_the_verb.html"></iframe>

  </span>

</span>

It works but the page is then very slow to load and there seems to be a limit to the number of possible iframe's: they don't display anymore if the text is too long. 它可以工作，但页面加载非常慢，似乎可能的iframe数量有限：如果文本太长，它们就不再显示了。

Any other solution, using javascript to load the text or something? 任何其他解决方案，使用JavaScript加载文本或东西？

Thanks. 谢谢。

EDIT : Following up on Richard P's remark: does that mean replacing iframe with javascript loading by hand, does that make sense, is that best practices? 编辑：继续理查德P的评论：这是否意味着用手工加载javascript替换iframe，这是否有意义，是最佳做法吗？ Would that be faster than the iframe's which are very slow to load? 这会加载非常慢的iframe吗？ Taking Javascript - read local text file into account: 使用Javascript - 读取本地文本文件：

<script type="text/javascript">
function loadDictionaryDefinitions() 
{
    var elements = document.getElementsByClassName("DictionaryDefinition");
    for (var i = 0; i < elements.length; i++)
        elements[i].innerHTML = readTextFile("file://" + elements[i].getAttribute("filename_of_dic_definition"));
}

function readTextFile(file)
{
    var rawFile = new XMLHttpRequest();
    rawFile.open("GET", file, false);
    rawFile.onreadystatechange = function ()
    {
        if(rawFile.readyState === 4)
        {
            if(rawFile.status === 200 || rawFile.status == 0)
            {
                var allText = rawFile.responseText;
                alert(allText);
            }
        }
    }
    rawFile.send(null);
}
</script>

and add: 并添加：

<body onload="loadDictionaryDefinitions()">

Answer 1

what about css hover ? css悬停怎么样？ Try this one: https://jsfiddle.net/maky/0h0ekhj6/ 试试这个： https ： //jsfiddle.net/maky/0h0ekhj6/

/* Tooltip container */

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
  /* If you want dots under the hoverable text */
}


/* Tooltip text */

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
}


/* Show the tooltip text when you mouse over the tooltip container */

.tooltip:hover .tooltiptext {
  visibility: visible;
}

Answer 2

You could use a popover in Bootstrap if you don't mind adding it to your project. 如果您不介意将其添加到项目中，可以在Bootstrap中使用popover。 It would require a bit of javascript but should be pretty simple. 它需要一些javascript但应该非常简单。 Most of the functionality of it is handled by Bootstrap. 它的大多数功能都由Bootstrap处理。

将鼠标悬停在文字中的单词上

问题描述

2 个解决方案

解决方案1
2 2016-08-19 16:38:23

解决方案2
1 2016-08-19 16:37:00

将鼠标悬停在文字中的单词上

问题描述

2 个解决方案

解决方案1 2 2016-08-19 16:38:23

解决方案2 1 2016-08-19 16:37:00

解决方案1
2 2016-08-19 16:38:23

解决方案2
1 2016-08-19 16:37:00