Hover over words in a text

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?

Right now I am using an 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.

Any other solution, using javascript to load the text or something?

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? Would that be faster than the iframe's which are very slow to load? Taking Javascript - read local text file into account:

<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()">

score 2 · Answer 1 · answered Aug 19 '16 at 16:38

what about css hover ? Try this one: 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;
}

this is exactly what I am already doing, but the definition for a word like "the" or "a" (or equivalent in a foreign language) can be very long and since the word is very common, the html will be huge. Is there a way to reuse the text of the definition for all words in all htmls? I used iframe's precisely for this. — BanK, Aug 19 '16 at 17:10

score 1 · Answer 2 · answered Aug 19 '16 at 16:37

1

You could use a popover in Bootstrap if you don't mind adding it to your project. It would require a bit of javascript but should be pretty simple. Most of the functionality of it is handled by Bootstrap.

answered Aug 19 '16 at 16:37

Richard P

46
4

thanks, considering using outside libraires but never done this (I am an amateur programmer) and the problem is, I want to encapsulate all these HTMLs (that I am generating with C#) in a .CHM help file, not sure if the CHM reader will play well with this? – BanK Aug 19 '16 at 17:12
Assuming you are just trying to insert data into the popover one time you just need to set the data-content attribute of the popover, probably using js or jquery. – Richard P Aug 19 '16 at 18:00
ok, edited the question does that make sense to you? I don't really see the difference with iframe's, would that be faster, is that really best practices? Not sure what the normal way to do it would be. – BanK Aug 19 '16 at 23:12
I would imagine that using javascript/jquery would be faster if you are doing this in more than a few places. The iframe is intended to display a nested html page, not just a small bit of content. I wouldn't expect a page to perform well with a bunch of iframes on it but the same thing in javascript should be fine. I'm not sure I can instruct you how to store and retrieve your definitions, though. – Richard P Aug 22 '16 at 18:09

Hover over words in a text

2 Answers2