Content Tooltip to display Image

(8 posts) (2 voices)

1. 

   nonprofitpartners
   Member

   Question: Could I get the code for having a "Image" tooltip appear when you hover over the content (text).

   I have found virtually all other combinations but nor this one. Thanks in advance.

   Special Note: I am new and this group/forum looks like a good one. I in part purchased from this theme company because of the solid documentation they provide and the forum dynamics. I have tried a few others and it is like the old wild west. I look forward to being apart of this group/theme

   Sincerely,
   Joe Johnson
   USA
   jjohnson@n-ppi.com

   Posted 8 months ago #
2. 

   Elliott
   Support

   Hello nonprofitpartners,

   On this page, http://themes.mysitemyway.com/elegance/galleries/video-tooltip-gallery/, you can grab the code from the "Get the Code" snippet.

   [one_fourth]
   [tooltip custom_id = "image1" width = "340" bgColor = "#000" sticky = "true" position = "top" trigger = '<span class="shadow_frame alignleft"><a href="http://themes.mysitemyway.com/elegance/wp-content/uploads/2010/06/spa1.jpg" rel="prettyPhoto"><img width="209" height="209" alt="" src="http://themes.mysitemyway.com/elegance/wp-content/themes/elegance/lib/scripts/thumb.php?src=http://themes.mysitemyway.com/elegance/wp-content/uploads/2010/06/spa1.jpg&w=209&h=209&zc=1&q=100"></a><img class="image_shadow" style="width:209px;" src="http://themes.mysitemyway.com/elegance/wp-content/themes/elegance/images/shortcodes/image_shadow.png" alt=""></span>']
   <iframe src="http://player.vimeo.com/video/8736190?title=0&byline=0&portrait=0" width="300" height="169" frameborder="0"></iframe>
   [/tooltip]
   [/one_fourth]

   What you'll want to do is replace the iframe with your image.

   Posted 8 months ago #
3. 

   nonprofitpartners
   Member

   Thank you. Sincerely, Joe JOhnons

   Posted 8 months ago #
4. 

   nonprofitpartners
   Member

   Your example is using the trigger as an image "tooltip custom_id = "image1" I am desiring to use a phrase in the sentence content as the trigger. For Example
   Once in, go to “My Library” familiarize yourself with the “Management Areas” - where My Library would produce a Image Tooltip when hovered over.

   Thanks in advance for you help.
   Sincerely, Joe Johnson

   Posted 8 months ago #
5. 

   Elliott
   Support

   That's just the ID which is required if your wanting to customize the trigger content. The actual trigger content is in this part,

   [tooltip trigger = "your phrase here"]

   Posted 8 months ago #
6. 

   nonprofitpartners
   Member

   Thanks I will give the code a try here shortly
   Joe Johnosn

   Posted 8 months ago #
7. 

   nonprofitpartners
   Member

   Your guide worked.
   http://pisgahchurch.org/info/resource-links/#!prettyPhoto/0/

   Is there a way to code so that the Word is a trigger and a hyperlink both.

   Thank you
   Joe Johnson

   Posted 8 months ago #
8. 

   Elliott
   Support

   Try opening up /wp-content/themes/[your_theme]/lib/shortcodes/13-tooltip.php and change line 179 from this,

   jQuery('a#{$tip_trigger}').cluetip({ local:true, {$options} hideLocal: false, cursor: 'pointer', showTitle: false, waitImage: false, clickThrough: false, dropShadow: false, waitImage :false, onShow: function(e) { {$style}{$close} }, fx: { open: 'fadeIn', openSpeed: 'fast' } });

   To this,

   jQuery('a#{$tip_trigger}').cluetip({ local:true, {$options} hideLocal: false, cursor: 'pointer', showTitle: false, waitImage: false, clickThrough: true, dropShadow: false, waitImage :false, onShow: function(e) { {$style}{$close} }, fx: { open: 'fadeIn', openSpeed: 'fast' } });

   Posted 8 months ago #

RSS feed for this topic

Reply

You must log in to post.