Portal Engine Questions on portal engine and web parts.
Version 6.x > Portal Engine > Glossary - Mousover - Tooltip View modes: 
User avatar
Member
Member
alexo - 1/31/2013 3:32:46 AM
   
Glossary - Mousover - Tooltip
Hi everyone.

As i could not found any appropriate solution, i want to ask you guys if you have a hint creating a glossary (i would do that with document types..) which i can show via tooltips on mousover.

for example:

This is my text which contains technical(?) words.

(?) -> on mousover show the description of technical..


Its important that i don't want to just link to a list of glossary-words...

Thanks for your help.

best regards

User avatar
Kentico Consulting
Kentico Consulting
richards@kentico.com - 1/31/2013 6:28:27 AM
   
RE:Glossary - Mousover - Tooltip
Hello,

could you please specify where and how you would like this to show? I mean - if I get it right. You have some document type and there some text with technical words and you would like to give some of those words an mouse over effect (tooltip) which would appear when a user on live site moves over the given word. Is that what you are looking for?

Best regards,
Richard Sustek

User avatar
Member
Member
alexo - 1/31/2013 6:41:21 AM
   
RE:Glossary - Mousover - Tooltip
yes - thats exactly what i want... and the "glossary-texts" should be centrally arranged -> so that we can easily administrate them.

thanks

User avatar
Kentico Consulting
Kentico Consulting
richards@kentico.com - 1/31/2013 8:28:10 AM
   
RE:Glossary - Mousover - Tooltip
Hello,

For this you may use jQuery UI. I managed to do what you want by editing the transformation that displays your document type.

First add this to the particular transformation:
<link href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script><script>
$(function() {
$( document ).tooltip();
});
</script>
<style type="text/css">
</style>

Also use the jQuery always in NoConflict mode as described at http://api.jquery.com/jQuery.noConflict/

This will register basic jQuery with UI and basic theme. At this point all you need to do is when you are writing some text in the document type you need to switch the Source button to begin editing through source code and then you may do as this example:
This is just some <span title="my own tooltip">useless</span> text. 

Now when user hovers over useless the tool tip will be shown to him.

You may find more information at http://jqueryui.com/tooltip/

Hope this helps.

Best regards,
Richard Sustek

User avatar
Member
Member
alexo - 1/31/2013 10:17:59 AM
   
RE:Glossary - Mousover - Tooltip
thank you for your explanation. how the tooltip can be realized is what i already know, but what i do not get is - how can i render the specific tooltip text (in your case "my own tooltip") from a central "glossary"?

for example:

i define a glossary document type: Title, Text

In my Cms tree i create following structure:

Glossary
--- A-B
-----Active Directory
-----Air Play
etc.
---C-D
.
.
.

Know i create a knew Article in which i use "Active Directory" which should be described inside my tooltip with the text from my "glossary-text"....

Sorry if you already brought the solution, but i do not know how i get the specific text from my "glossary"

Thank you

User avatar
Kentico Consulting
Kentico Consulting
richards@kentico.com - 2/1/2013 2:20:03 AM
   
RE:Glossary - Mousover - Tooltip
Hello,

sadly there is no such build it functionality of doing this. The thing you may achieve this is by creating your custom macro which is described here http://devnet.kentico.com/docs/devguide/index.html?registering_cutom_macro_methods.htm and some Custom table with fields like "Word" and "Tooltip".

You could create some macro like "GetTooltips". You would pass this macro an text which you would like to have replaced. Then you would get the data set of all rows from that custom table and then replace the word with the something like <span tooltip="Tooltip">Word</span> and after all that return the final text which you would display in transformation. This way you could do this in every document type just by calling your "GetTooltips" macro.

Best regards,
Richard Sustek

User avatar
Member
Member
alexo - 2/1/2013 3:47:09 AM
   
RE:Glossary - Mousover - Tooltip
Thank you Richard, that sounds good.

I will try to achieve your recommendation - if i have any problems i will be back with some more questions ;-)


thank you very much,

best regards

alex