VocaDB developed a useful word search solution to help users have a more convenient language learning.
Instead of typing in a dictionary's input field for every search, VocaDB Tooltip enables users to find dictionary information by simply selecting a word or text, either by clicking or highlighting.
Our Tooltip uses extraction technology and provides translated definitions. It supports 38 languages.
It is powered by VocaDB's Tooltip API, Extraction API, and the APIs of Google Translate and MS Bing.
This document is intended for developers who want to build apps with integrated VocaDB Tooltip function.
VocaDB Tooltip can be accessed in three ways:
- Double click a word
The Tooltip box will pop up when a word is double-clicked.
- Select a word
The Tooltip box will pop up when select a word for search relative words.
- Select a text
The Tooltip box will pop up when a text is highlighted for extracting words and idioms.
Tooltip API and Language Selection tool both uses JQuery library, if your site has already installed JQuery, you may skip.
More info about JQuery
This section provides steps on how to setup your project in using the VocaDB Tooltip.
Include our css in your header.
<link href="http://www.vocabdb.com/dic/assets/css/voca_lang_sel.css" rel="stylesheet" type="text/css" />
<link href="http://www.vocabdb.com/dic/assets/css/voca_tooltip.css" rel="stylesheet" type="text/css" />
PATH TO refers to how you import the files from your project.
example/index.html for more info.
please note that only add the two CSS from
Add the Language Selection button.
<button class="vocadb_lang_select flag_settings">
<input type="hidden" id="tlang"/>
Note: It can be styled based on your preference.
Add the class vocaDB to <body>
Note: you may add the class
vocaDB to your desired element that Tooltip-API will trigger on. Can be multiple
Save and Compile.
Note: If you want some text to not be included on the tooltip, If you want a specific word or text to be excluded, just add the class name
un-voca to its parent element(s) so that it will not be recognized by the Tooltip function.
Q: Can the Language Selection button be modified/styled?
A: : Yes, as long as you don't delete the class names in the button. Class names used in the button are unique and can be used to add styles.
Q: Can I add the initialization lines anywhere?
A: Yes, as long as they are below the scripts. For best results, please add them at the lowest part of the html structure (before end of body).
Q: What if I left the selector blank (eg. search_vocaDB( "", 'new', true);)?
A: The default selector is "body." If you dont want to cover all the texts in your website, you may add a selector or the class name of your node.
Q: Can I use any JQuery versions?
A: No, it will only work with 1.9 or higher.
Q: How many languages does your translation support?
A: As of 01/18/2016, we support 38 languages, you can see it below.
Q: Can I use voca_tooltip without using voca_lang_sel?
A: Yes, voca_tooltip looks for
<input type="hidden" id="tlang"/> in your website, while voca_lang_sel only sets a value of
id='tlang'. You may set the value of 'tlang' manually with the language code given below.
Q: How can I modify/customize the tooltip box from voca_tooltip?
A: It depends on the search type and platform. Single word searches triggered by double-clicking use the class name
.voca_only. for desktop and
.voca_only_mobile for mobile. Text searches triggered by highlighting use the class name
.voca_trans for desktop and
.voca_trans_mobile for mobile. You may define these classes on your style sheet and modify based on your preferences.
As of January 2016, VocaDB Tooltip supports 38 languages.
While the default language is English, users can set the preferred language for search results.
Back to top