I’m trying to find a add on, where if I had a “certain” word where if I hover over that word it will give me a definition of that word means.
Is there a add on for this?
Review lookup or popup dictionary
As far as I know, these two add-ons look up content on the user’s own collection, and don’t support querying words from online dictionaries, for example.
1 Like
I found MacOSX dictionary which is nice, just highlight the word and it looks it up via Dictionary and brings Wiki page too in a small little window which is nice, but it would be nice to like have hyperlink the word and all you do is hover over it and it gives definition for said word.
The difficulty here is to determine which words to hyperlink. I once did something like this by excluding words from a list of stopwords (15.000 most common german words, drew an arbitrary line there):
It worked to exclude latin medical terms, but probably won’t work for many other use cases.
If you got a specific online dictionary in mind, I could provide a semi-automatic solution using my add-on Tippy Tooltips, if you’re interested. Here’s an example for Wikipedia links: Tippy Tooltips [Official Support] - #31 by kleinerpirat
1 Like
This is awesome! I’ve recently written an add-on (yet to be published) to query vocabulary from Wiktionary using offline data downloaded from https://kaikki.org/ and I got the idea of adding such pop-up feature after reading this thread. Will look whether I can use Tippy Tooltips!
2 Likes
Happy you’re looking into it! ^^
My add-on automatically adds the JS libraries popper.js and tippy.js to collection.media. Here’s my current import script, which I intend to deliver with Henrik’s Asset Manager in the next version:
(async function initTooltips() {
if (typeof tippy === "undefined") {
await importFiles([
{
name: "_tippy.umd.min.js",
dependencies: [{ name: "_popper.min.js" }],
},
{ name: "_tippy.css" },
]);
}
async function importFiles(files) {
const mediaPrefix =
globalThis.ankiPlatform === "desktop"
? ""
: globalThis.AnkiDroidJS
? "https://appassets.androidplatform.net"
: ".";
await Promise.all(
files.reduce((promises, file) => {
switch (file.name.match(/\.(js|css)$/)[1]) {
case "js": {
promises.push(
(async () => {
if (file.dependencies) {
await importFiles(file.dependencies);
}
await import(`${mediaPrefix}/${file.name}`);
})(),
);
break;
}
case "css": {
promises.push(
(async () => {
const link = document.createElement("link");
link.type = "text/css";
link.rel = "stylesheet";
link.href = `${mediaPrefix}/${file.name}`;
document.head.appendChild(link);
})(),
);
break;
}
}
return promises;
}, []),
);
}
(function createTooltips() {
globalThis.tippyTypeset = false;
tippy("[data-tippy-content]", {
placement: "bottom",
allowHTML: true,
theme: "sample",
interactive: true,
trigger: "mouseenter click",
animation: "scale-extreme",
appendTo: document.body,
onMount(instance) {
MathJax.typesetPromise([instance.reference]);
},
});
})();
(function initShortcuts() {
let tips = [...document.querySelectorAll("[data-tippy-content]")];
let prev = null;
if (!globalThis.tippyShortcut)
document.addEventListener("keydown", (event) => {
if (event.key == "Tab") {
if (tips.length == 0) {
tips = [...document.querySelectorAll("[data-tippy-content]")];
}
if (tips.length > 0) {
event.preventDefault();
if (prev) prev._tippy.hide();
let next = tips.shift();
next._tippy.show();
prev = next;
}
}
});
globalThis.tippyShortcut = true;
})();
})();
Tippy.js is well documented, here are all props you can pass to a tippy instance: All Props | Tippy.js
1 Like
I don’t have a specific library they are medical terms, so would I just look up Medical Term libraries?
Maybe this will be of interest to you:
Web Quickly Search
Web Browser - Search terms, Import texts and images automatically
Anyway, would be nice to have a pop-up dictionary similar to Chrome add-ons. For example:
Longman Dictionary Bubble
There are plenty of add-ons for Chrome like this one.
Thanks @kleinerpirat !
I looked into Tippy.js and added tooltips to another dictionary add-on that I’ve recently published.
(Hopefully no one will notice that the tooltip arrow is off 
)
1 Like
Tooltips will center themselves in relation to their reference, which in your case is selection.anchorNode.parentElement - so the whole block that contains the word.
You could create a dummy span around the selection, which is deleted again when the tooltip is hidden:
function showTooltipForSelection() {
if (!window.getSelection.toString().trim()) return;
const range = window.getSelection().getRangeAt(0);
const selectedText = range.extractContents();
const span = document.createElement("span");
span.appendChild(selectedText);
range.insertNode(span);
const tooltip = tippy(span, {
placement: "bottom",
allowHTML: true,
theme: document.body.classList.contains("night_mode") ?
"material" :
"light",
interactive: true,
trigger: "",
animation: "scale-extreme",
appendTo: document.body,
onHide() {
span.after(span.innerHTML);
span.remove();
},
});
tooltip.show();
globalThis.tippyInstance = tooltip;
pycmd(`trdict:popup:${selectedText}`);
}
1 Like