vocaDB Tooltip

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:
 
  1. Double click a word
  2. The Tooltip box will pop up when a word is double-clicked.

  3. Select a word
  4. The Tooltip box will pop up when select a word for search relative words.

  5. Select a text
  6. The Tooltip box will pop up when a text is highlighted for extracting words and idioms.

JQuery Required
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.

Step 1

Include our css in your header.
 
<head>
...

<link href="https://www.vocabdb.com/dic/assets/css/voca_lang_sel.css" rel="stylesheet" type="text/css" />
<link href="https://www.vocabdb.com/dic/assets/css/voca_tooltip.css" rel="stylesheet" type="text/css" />
...
</head>
PATH TO refers to how you import the files from your project.
see the example/index.html for more info.
please note that only add the two CSS from assets folder.
 

Step 2

Include the javascripts before the end of body <body>.
 
...

<script type="text/javascript" src="https://www.vocabdb.com/dic/assets/js/voca_lang_sel.js" language="JavaScript">
<script type="text/javascript" src="https://www.vocabdb.com/dic/assets/js/voca_tooltip.js" language="JavaScript">
</body>
 

Step 3

Add the Language Selection button.
 
<button class="vocadb_lang_select flag_settings">
</button>
<input type="hidden" id="tlang"/>
Note: It can be styled based on your preference.
 

Step 4

Add the class vocaDB to <body>
 
<body class="vocaDB">

Step 5

Add the <script> to the bottom of the page
 
<script>
$(document).ready(function(){
	search_vocaDB( "vocaDB", 'new', true);
</script>
Note: you may add the class vocaDB to your desired element that Tooltip-API will trigger on. Can be multiple
 
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.
If you want to apply for VocaDB Tooltip API, click the button below:
 

Apply for API Key

 
For more information, click the button below:
 

Tooltip (simple word) API Documentation


 

© vocaDB 2016. All rights reserved