Tippy is a friendly little WordPress plugin that gives you a way to include highly configurable tooltips in your WordPress site. For example:
See this link: Hover on me.
Create a tooltip via the tippy shortcode. Here is the code that generates the above tooltip:
[tippy title="Hover on me"]I am a friendly Tippy tooltip.<br /><br /><b>Please do not fear me. I am nice!</b>[/tippy]
Install Tippy via Add New Plugin in your Dashboard or download it and move it into your plugins directory. Activate it, and you’re good to go! Be sure to check out the Settings page in your Dashboard (Settings -> Tippy) to select specific options.
To customize the look of the tooltip, copy plugins/tippy/tippy.css into your theme directory and customize it as you like or add styling rules to your theme’s main css.
Download
You can download Tippy from the WordPress repository.
Additional examples:
News Links[tippy title="News Links" header="off"] <div style="padding: 5px;"> Be sure to check the news each day at one of the following sites:<br /><br /> <a href="http://news.bbc.co.uk/">BBC News</a><br /> <a href="http://www.nytimes.com/">The New York Times</a><br /> </div> [/tippy]Per-tooltip size
[tippy title="Per-tooltip size" width="300" height="200"]You can set the width and height of individual tooltips[/tippy]Check the Weather
[tippy title="Check the Weather" reference="http://www.weather.com" header="on"] You can use <a href="http://www.weather.com/">Weather.com</a> to check your weather forecast.<br /><br /> [/tippy]UTF-8 support
[tippy title="UTF-8 support"] ¥ · £ · € · $ · ¢ · ₡ · ₢ · ₣ · ₤ · ₥ · ₦ · ₧ · ₨ · ₩ · ₪ · ₫ · ₭ · ₮ · ₯ <br /> å,ä,ö Å,Ä,Ö[/tippy]Did you see that giraffe?
[tippy title="Did you see that giraffe?"] <img src="http://croberts.me/wp-content/uploads/2011/05/giraffe-208x300.jpg" alt="giraffe" width="208" height="300" class="alignnone size-medium wp-image-117" /><br /> A giraffe stretching at the zoo.<br /> This example shows you can include images inside Tippy. [/tippy]Youtube, anyone?
[tippy title="Youtube, anyone?" header="off" width="460" height="365"] <object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/17jymDn0W6U&hl=en_US&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/17jymDn0W6U&hl=en_US&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object> [/tippy]
February 14, 2013 at 1:49 am
Hi Chris,
just want to thank you for the plugin. You’ve done a great job. Congrats !
It is great and works perfectly on the first page of my website. Actually your plugin made me switch partly from another plugin (collapse-o-matic)
Just a suggestion from the other plugin: They offer to swap the title and allow tags like this [expand title="See" tag="h1" swaptitle="LOOK" ].
Thanks again
February 15, 2013 at 11:02 pm
Peter,
I like the swap title suggestion, I’ll plan for it in an upcoming version. As for tag, that shouldn’t be necessary since the shortcode itself can be wrapped in whichever tag desired. Does the attribute accomplish something that just wrapping the shortcode wouldn’t do?
February 16, 2013 at 2:09 pm
Peter,
I’ve added the swaptitle attribute to Tippy 4.2.0. See http://croberts.me/2013/02/16/new-features-in-tippy-4-2-0/ for an example.
February 16, 2013 at 10:25 pm
Hi Chris,
you’re just great to include so fast the swap title.
I used it already now on the start page of http://www.see-seen.com. Only problem : Differently to your demo it doesn’t swap back to the original title when mouse out. What do I miss ?
Regarding tag you are right – your plugin simply works within a tag, the other plugin didn’t.
Just to let you know as I saw a remark in the discussion about integrating shortcodes:
In http://www.2.letterdomain.com the contact7 form shortcode is integrated and works just fine.
Thanks again so much for that great plugin – it’s amazingly good and strikes through its simplicity.
Really worth to donate a few bucks …
February 16, 2013 at 10:34 pm
Peter,
I think I see the problem – if I’m right, I should have a fix out in just a little bit.
February 16, 2013 at 10:36 pm
Wait, never mind – it does appear to be working on your site, it just may not be working as you expect. I can alter the behavior, but right now so long as the tooltip remains visible, the swap title is on display. In the case of your site, when a user hovers over See, the tooltip displays and the text turns to SEE. So long as the tooltip is visible, the text remains SEE. Once the user hovers off and the tooltip goes away, the text reverts to See.
Specifically: if the user hovers over either the Tippy link or the tooltip itself, it shows the swap title.
Would you prefer it to only show the swap title when the user hovers over the link, not when the user hovers over the tooltip?
February 17, 2013 at 9:10 am
Chris,
updated on v4.2.1, but nothing changed. Pls check … I leave it there with CSS unchanged. Swaptitle doesn’t swap back.
Best would be: When mouse hovers on Title → Swaptitle = ON, Tooltip =ON → Swaptitle =ON as long as tooltip=ON, … → when mouseout of either Swaptitle or Tooltip, then Title=ON.
Actually nothing else than a nice navigation with text elements
February 17, 2013 at 1:34 pm
Figured it out. It does work when you mouse on the link then mouse away, but if you mouse from one Tippy link to another, it prevents it from swapping back.
I’ve fixed the problem but have one other issue to look at before I post the update. Hopefully this will straighten it out for you.
February 17, 2013 at 1:34 pm
Peter,
By the way, I really like how you’ve used Tippy. Looks great, love the effect on your site. Don’t think I’ve seen it used quite that way before.
February 17, 2013 at 2:44 pm
Peter,
Just posted 4.2.2 which I think will fix your problem. Please let me know if it works.
February 17, 2013 at 5:29 pm
Chris,
v4.2.2. did not change the issue. Hope you find the gap.
btw…maybe one more thing you should know: The Shortcode of your plugin is used within another plugin.
For example the arrow in the middle:
[column width="20%" ]
[tippy title="↭" width="230" Swaptitle="⇣" offsetx="-95" header="off"]
Can the Seer be seen ?
[/tippy]
[/column]
Sorry for ruining your sunday and causing you further headache. Get some Aspirin for the 10 bucks sent to you, will ya ?
Good,that you like the way I used your plugin.
Wordpress says, that Code is Poetry
I say, that GOOD Code is Possibility,
and definitely your plugin belongs to that category.
February 17, 2013 at 5:37 pm
Chris,
good news. It works.
Sometimes it needs a bit of time, until the code is propagated through the internet – I think that happens because the hosting uses some Cloud stuff – I don’t know … or because I am geographically too far away …
Anyway… great job that you’ve done.
Now you don’t need Aspirin, but keep on going with Aspiration, ya ? …
February 15, 2013 at 10:37 pm
Hey Chris that’s an unbelievably great wordpress plugin, one of the best i’ve ever used.
One thing i would love to see is that i can use auto close individually, so on youtube videos i can turn it off and on other content i can turn it on.
Maybe like header=”on” or header=”off” i can put a shortcode autoclose=”on” or autoclose=”off” inside.
Thank you for the great work
February 15, 2013 at 11:04 pm
Michael,
Thanks for the comment, and good suggestion on autoclose. I’ll plan to include it.
February 16, 2013 at 2:10 pm
Michael,
Autoclose is added in 4.2.0, also a new delay attribute. See http://croberts.me/2013/02/16/new-features-in-tippy-4-2-0/ for examples.
In this case, the autoclose value is true/false, not on/off.
February 16, 2013 at 10:01 pm
Hi Chris, thank you very much for the new autoclose shortcode.
But it seems that on my upcoming page the autoclose shortcode don’t work.
In the Tippy Options i set: Automatically closes when user mouses away from the link.
Than i use the new shortcode autoclose=”false”
But the shortcode don’t override my Tippy Options setting, although i set autoclose=”false”
The new delay shortcode works fine, and when i set the delay time up to 60000 or higher it’s an alternative to autoclose=”false”, but not the real deal
swaptitle=”alternate title” also works great.
Now the only tooltip Plugin i use is Tippy
Congratulations, you did a great job
February 16, 2013 at 10:18 pm
Michael,
That’s odd – I’m not able to replicate the problem. Could you paste in your exact shortcode?
Here’s what I have:
[tippy title="Hello" autoclose="false"]Hello world.[/tippy]
That is working for me without problem.
February 16, 2013 at 10:20 pm
Oh, I did notice I forgot to code for the user specifying ‘autoclose=”true”‘ so I was able to fix that little glitch, but it has nothing to do with your issue.
February 16, 2013 at 11:57 pm
Chris,
The shortcode [tippy title="Hello" autoclose="false"]Hello world.[/tippy] is working for me too, but not with a youtube video or an image inside the code.
Here’s what I have:
[tippy title="Youtube" header="on" autoclose="false" img="http://...image.png" width="436" height="245"]<iframe width="436" height="245" src="http://www.youtube.com/embed/…[/tippy]
But with the delay shortcode inside, the youtube video stays as long as the delay time is set and than the video fades out no matter if the autoclose=”false” attribute exists.
Thank you for your quick response
February 17, 2013 at 1:57 pm
Michael,
I’ve isolated one cause behind the problem but something else weird is happening and I haven’t nailed it down yet. I’ll post an update as soon as I’ve got it.
February 17, 2013 at 2:43 pm
Michael,
I think I’ve got it, just posted 4.2.2 which should fix the issue. Basically, while autoclose ensured the tooltip didn’t close when mousing away from the link, I forgot to keep it from closing when mousing in and out of the tooltip itself. Should work now.
February 17, 2013 at 2:31 pm
Thanks,
and as Peter said:
This plugin is worth to donate a few bucks!
February 22, 2013 at 10:55 pm
This is by-far the BEST pop-up plugin I’ve seen on WordPress. Absolutely fabulous, you’re a lifesaver. Thank you so much!!
February 23, 2013 at 10:00 am
Glad you find it useful. Thanks for the comment.
February 24, 2013 at 8:13 am
Chris – everything indicates this is a killer plugin, except I don’t have a clue how to implement it. I see your short codes, but how does one move a short code into an HTML link, or a menu item link? Basic stuff, I know, and I’ve been around a while (never a tooltip user until now), but this little hump in the camel’s back has me stumped.
Please advise…
February 24, 2013 at 10:03 am
Chris – okay, figured everything out except how to use the tippy tool in a drop down menu, which is actually why I’m looking for a tooltip plugin…
Awesome, so far!
February 24, 2013 at 2:48 pm
Gabriel,
How have you created the drop-down menu? There are a few ways to programmatically add tooltips in your theme (including the simplest: using a shortcode and running it through the built-in do_shortcode() function – http://codex.wordpress.org/Function_Reference/do_shortcode ) but that probably won’t accomplish what you’re looking for. Depending on how you create your drop-downs, it may not be possible (that is, not necessarily straightforward or simple) to use Tippy for this.
February 24, 2013 at 4:33 pm
The menu is part of the theme CSS. Each menu item is a page, of course. So it may very well be out of my own personal skill set to get Tippy to work, and that’s unfortunate because I love the CSS features of your popup.
I’m also trying to use Glossy with Tippy but the only method I’ve been able to get to work has been the inline method.
February 26, 2013 at 1:01 am
Are you seeing a particular error in glossy? Are you telling it to display a term – using either the gs or glossy shortcode – and it isn’t doing it?
February 25, 2013 at 2:40 am
Hi Chris,
another suggestion for the shortcode would be to assign borders, backgrounds and box-shadows for each pop-up.
As you see on my website, the starting page is without any borders, but would love to style now the top/bottom/right borders in http://www.see-seen.com/read/.
For the way I use the plugin another suggestion would be to assign height and width in % like in max-height or max-width. Then the popup can fly out as determined in offsetx and offset, but the size of the window adapts to the browser window. With having screens from Megasize on the desk to Minisize on the Tablet the sizing in percentage would be fantastomatic.
Anyway, your plugin is simply fantastic, I love to play with it and its multifunctional potential.
Cheers
P.
February 26, 2013 at 12:54 am
Peter,
This can already be done, though not inline – you can specify per-tooltip class and write a rule for that class. I have considered – and may still add – a per-tooltip style=”normal css rules here” attribute, but this would be fairly limited. A typical tooltip has three parts:
Styling gets set on all three of these to achieve the overall look. Just one inline style=”" won’t be able to achieve much – better to set an inline class=”" and style it accordingly.
A somewhat similar issue would occur with the sizes, though I’ve been doing a little more responsive work recently and am interested in some responsive possibilities with the plugin so I may fiddle with it a bit to get it to work for sizes. It would be pretty difficult to shift away from pixels for the offsets.
February 25, 2013 at 8:08 am
Can u tell me how to set color and font size of the tippy title?
This is example:
[tippy title="Specifically sized" height="100" width="450"]This is my specifically sized tooltip.[/tippy]
I need to change color of the “Specifically sized” but i dont know how. Can u help me?
Thanks,
N.
February 26, 2013 at 12:57 am
Onlinko,
You can’t style it from the shortcode, but you can copy the tooltip’s css (plugins/tippy/tippy.css if you are using version 5.0.0) to your theme’s folder and modify the colors and sizes and such from there. Or you can just add the rule to your theme’s default stylesheet. The rule your looking for would be:
.tippy_header {
font-size: whatever;
color: whatever;
}
Note that this rule would only work in version 5 of Tippy; for older versions, use .domTip_tipHeader instead of .tippy_header.
April 26, 2013 at 4:16 pm
Hi,
First off this is a great plugin and I really appreciate all the work you’re putting into it.
I am having a problem with the method you’ve outlined for changing the color for the tippy header text.
I have tried adding it to style.css with no luck, and I have also tried modifying tippy/tippy.css with no luck.
I’m not sure where I am missing because this seems like a very straightforward modification to the css.
I am using the latest version of tippy, 5.1.2
April 26, 2013 at 8:19 pm
Mike,
Try copying tippy/tippy.css to your theme’s folder and edit tippy.css in that location. See if you have more luck with it that way.
April 27, 2013 at 2:42 am
Chris,
Sorry to post this twice, but I clicked reply from the email and I think I accidentally replied to the wrong thread:
Thanks for your response. I have copied the tippy.css file to the theme’s folder via FTP, but editing the “.tippy_header” line in the styles of this file doesn’t seem to have any effect on the color of the header.
Is there any other step I should be taking to enable the css file in my wordpress installation? Should I make any changes to my style.css file at all? I’m at a total loss as to why this isn’t working. I’m not really too familiar with php unless it’s a simple copy paste situation, but is there a php file that I should be looking into modifying?
I know it’s a minor thing, but it would be really helpful to be able to adjust that color.
Thanks,
Mike
May 7, 2013 at 8:27 am
Mike,
To change the header, edit .tippy_header
In your theme stylesheet (style.css) you might put:
body .tippy_header { background-color: whatever; color: whatever; }
body .tippy_header a { color: whatever; }
This should override Tippy’s default styling with new rules for the header.
March 1, 2013 at 11:00 am
Regarding the sample “Youtube, anyone?”: Is there a parameter to start the video right after popping up?
Thanks.
Ronald
March 5, 2013 at 1:42 pm
Ronald,
You should be able to do it using the normal method for making Youtube videos auto play: add &autoplay=1 to the parameters. So if your embed code contains a url that looks like http://www.youtube.com/v/17jymDn0W6U&hl=en_US&fs=1& you would modify it to be http://www.youtube.com/v/17jymDn0W6U&hl=en_US&fs=1&autoplay=1
March 4, 2013 at 10:53 am
Hi Chris,
I just installed Glossy & Tippy and am enjoying configuring the CSS for the tooltips as well as reading your posts and user comments for guidance. However I am having trouble configuring the headers as I would like, which is to have the tooltip headers (gray area with title & Close link) to not only be “off” but also for the real estate they take up to not be generated. I can made the word “Close” disappear, but cannot get the title to disappear. I have tried [glossy term=”my_entry_name” header=”off”] but the entry name remains as well as the header area itself. I also tried .tippy_header {display:none;} (& commented out the rest of the definitions) but the tooltip title “my_entry_name” & title area (gray area above the body) still is generated. I basically want the header area to just go away. Is it possible to do this? If so, surely turning off headers can be set globally? (and how would one do that?)
Another question: can the [glossyindex] generate the content of the entries themselves, either as well as or rather than the entry titles? (currently it generates a popup over each title)
And finally: do you have a suggestion as to how to insert a database table as a unit (rather than the daunting task of entering 900+ entries by hand)?
Thank you for such a useful & configurable plugin!
Best,
Lee
March 5, 2013 at 1:46 pm
On the header issue, Glossy doesn’t have a header=”on/off” option but I’ll add that in for the next version.
On glossyindex, use inline=”true” (this also works with individual glossy terms) – note that I am not happy with how the inline index currently works so I’ll likely be tweaking it and perhaps adding more options to make it more customizable.
On inserting the terms, how are they currently stored? If you have them in a db table or some sort of csv file, it shouldn’t be difficult to write a script to autoload them into Glossy – certainly easier to write the script than to add them by hand!
March 7, 2013 at 11:25 am
Hi Chris,
Thanks for considering the Glossy header option, that’s great news! Just wondering, if the header is removed, will the Entry Link still work on the entry (anchor) itself? (such as in your “Check the Weather” example above).
On the subject of entering hundreds of entries, they are currently in various formats, including a text file, a JS include file and an html file. Any suggestions as to how to merge them into Glossy/the database? I understand entries go in gs_store, but I feel this may be an uphill battle…
Now a couple of hiccups: I’m loving the inline glossyindex, but I wonder if you have seen what I see when it is generated, specifically a solitary colon before each listing (the colon does not appear in listings when in a tooltip). Any ideas as to how to get the colons to go away? It’s almost as if the inline function is trying to generate the entry name before the entry content, using the colon as separator, but I’m not getting the entry name. Also, the Index header (gs_indexAbbrev?) seems case dependent, as it’s generating uppercase and lowercase listings of the same letter. I have a listing “daCosta” and a listing “Daniels”, and it generates an Index header with the letters “D” and “d”. The easy thing would be to change my listing, but as they are surnames I’d like to honour the spelling.
Also, I’m getting an error I saw posted in your comments last year i.e. “The plugin generated 200 characters of unexpected output during activation. If you notice “headers already sent” messages, problems with syndication feeds or other issues, try deactivating or removing this plugin.” Only generated when Glossy activated. (using v. 1.5.7). It’s not a fatal error, but wondering if it’s sorted out.
Thanks so much for your help & your work on these excellent plugins!
March 8, 2013 at 11:24 am
Per-glossy header=”on/off” is present in version 2, just posted, as is a global header option.
Also present but unfinished are numerous new options for inline glossyindex. I had to push out v2 a little early to address some bugs, but in the works are lots of customizations for inline. I don’t like how it works now, and your comments point to the problem: way too inflexible. I’m adding new attributes like showTerm, beforeTerm/afterTerm, beforeDef/afterDef, etc, to increase customization. These aren’t yet ready but will be.
Also, version 2 should fix the 200 characters error.
On all the entries, I also plan to add an import/export feature which will allow importing term files, probably a csv type file but I haven’t started on that yet so I’m not sure. That won’t help you now, however, and I don’t know how long until I get that in place.
March 11, 2013 at 10:04 am
Hi Chris,
thank you for the fantastic new developments & options! Lots of customization options, import options for generating large amounts of entries in one go (will try it soon), and clean code to boot (no more “headers already sent” errors). Tippy & Glossy are hands down the best tooltip plugins for WP! I can’t thank you enough for work on them as well as your timely responses, but I hope the donation that we at Exponential have made comes close.
March 11, 2013 at 10:06 am
I still need to document the import feature to show the way to format files and fields, but yes, it should make it much easier to import data.
March 16, 2013 at 3:25 am
Hi Chris,
I’m just discovering WP and its plugins.
First of all, I thank you for the job you made on your plugins !
Here are some of my suggestions
:
1 – Add a ‘Settings’ link among the Active/Deactivate other ones, on the Plugins page. This is not super important of course but for somebody as me that is a WP newbie, it’s a bit confusing (at the beginning) to see that other plugins have their ‘Settings’ link and not Tippy.
2 – Tippy doesn’t seem to be internationalized and this is not really important for its role but I just suggest to replace the default ‘Close’ label by, for instance, an cross icon or even just a ‘X’ character. Like that, you don’t have to manage i18n and it will be more compliant with any languages… Don’t you think ?
3 – You added recently some options as for ‘delay’ and then I think you could adjust some labels (and popups) into your Settings page that would precise the “default value” nature of each parameter that could need it. Like that we could see which parameters are global settings and which ones can be overridden on each usage.
As you can see my suggestions are just little improvements
Regards
Laurent
March 18, 2013 at 11:13 am
Laurent,
Thanks for the suggestions! There are some good ideas in there. I’ll make note of them for an upcoming release.
March 19, 2013 at 11:56 am
Hi Rob,
I would like to place the following code
but i can’t get the image to show, outside tippy it works. any ideas ?
best regards
Joe
March 19, 2013 at 11:11 pm
Joe,
I assume that is within a post or page, so what do you have set up to allow php to execute within posts/pages?
March 20, 2013 at 2:18 am
Thanks for your reply, yes this is in a post, i think it is a formatting problem instead of the picture I get this
,
the code works perfectly outside the [tippy], This is the code I am using. I am displaying the titles of the attached images and as a mouseover the medium size image.
<?php if ( in_category(9974)) { ?>ich bin cat 99974<?php; } elseif (is_singular( array( 'digitale-medien', 'anderer-post-type' ))) { ?> <?php global $post; $args = array( 'post_type' => 'attachment', 'orderby' => 'menu_order', 'order' => 'ASC', 'post_mime_type' => 'image' ,'post_status' => null, 'numberposts' => null, 'post_parent' => $post->ID ); $attachments = get_posts($args); ?>Die Neuheiten für den Monat <?php the_time('F Y'); ?> sind <?php if ($attachments) { foreach ( $attachments as $attachment ) { $alt = get_post_meta($attachment->ID, '_wp_attachment_image_alt', true); $image_title = $attachment->post_title; $caption = $attachment->post_excerpt; $description = $image->post_content; ?> [tippy title="<?php echo $image_title; ?>" autoclose="true" header="on" delay='100' width="300"] <?php echo wp_get_attachment_image( $attachment->ID, medium , true); ?> [/tippy] <?php } } ?> <?php; } else { ?>bin weder cat 71 oder 73 oder 72 oder 74 noch digitale-medien <?php; } ?>thanks for your help
March 25, 2013 at 7:22 pm
Joe,
I just posted Tippy 5.1.0 with the experimental option. Go to the Tippy settings in the dashboard, toggle on the bottom right option, and see if that works for you. I’m still not sure it would handle things correctly, but it has a better chance for success.
March 26, 2013 at 1:54 pm
Hi Chris,
I appreciated your help and you effort. Sorry to tell you that now it works less, even with the new option ticked. B4 the update I was able to run this code
now it doesn`t show me anything, here is the complete code without ifs and thens and simplified
<?php global $post; $args = array( 'post_type' => 'attachment', 'orderby' => 'menu_order', 'order' => 'ASC', 'post_mime_type' => 'image' ,'post_status' => null, 'numberposts' => null, 'post_parent' => $post->ID ); $attachments = get_posts($args); if ($attachments) { foreach ( $attachments as $attachment ) { $alt = get_post_meta($attachment->ID, '_wp_attachment_image_alt', true); $image_title = $attachment->post_title; $caption = $attachment->post_excerpt; $description = $image->post_content; ?> [tippy title="<?php echo $image_title; ?>"] Here comes the title :<br /> <?php echo $image_title; ?><br /> and here the image<br /> <?php echo wp_get_attachment_image( $attachment->ID, medium , true); ?> [/tippy] <?php }} ?>March 26, 2013 at 1:56 pm
Joe,
Just had a thought which should have occurred to me before. Since you are able to insert php, you should be able to access Tippy directly rather than via Shortcode. On my iPad at the moment, I’ll post an example when I’m back at my computer.
March 26, 2013 at 5:29 pm
Joe,
Here’s an example of generating a tippy link programmatically:
< ?php
global $tippy;
$tippyLink = $tippy->getLink(array(‘title’ => ‘This is my link/header title’, ‘text’ => ‘This text goes in my tooltip’));
echo $tippyLink;
?>
I still need to write a post documenting the array passed to getLink() but if you look in plugins/tippy/tippy.php around line 376 you’ll see documentation of the various attributes you can pass into the array.
March 21, 2013 at 10:38 am
Hi Chris!
Thanks for the great plugin.
I implemented it and it was working great then I went to the site’s homepage and realized this plugin has a conflict with the “Video.js – HTML5 Video Player for WordPress” plugin. We were using the Video.js plug in for a nifty slideshow that contains videos/images.
Are you aware of the conflict and would you be willing to look into it?
thank you
March 21, 2013 at 12:46 pm
Do you have a test link up somewhere, a page where I can see what its doing and look at any errors it may be throwing? Or can you describe what happens/what breaks with Tippy activated?
April 21, 2013 at 3:20 am
just to let U know : Tippy works perfectly with Secure HTML5 Video player.
Examples : http://www.see-seen.com/watch
March 21, 2013 at 1:05 pm
Hi Chris,
I cannot give a test link.
The slideshow breaks in that all the images and videos become stacked vertically on the page and the js is no longer functional. When I deactivate Tippy, it becomes a functional horizontal-scrolling slideshow again.
Thanks,
Emily
March 22, 2013 at 9:56 am
Would you be able to check the javascript console in your web browser, see what errors are generated, if any? It sounds like Tippy is causing a javascript error which is halting script execution. That wouldn’t conflict with Video.js, per se, but would prevent any further scripts from loading. If that is happening, there should be an error in the console. Please send me the error and I’ll see if that helps me track down the problem.
March 22, 2013 at 10:19 am
Here are the errors. I also sent an email via your contact form.
=================
Uncaught TypeError: Property ‘$’ of object [object Object] is not a function (script.js:6)
Uncaught TypeError: Cannot read property ‘fn’ of undefined (home.js:8)
=================
March 26, 2013 at 5:40 am
Goodmorning
I have tried to use tippy for the video, but I do not understand because it does not work
Thanks
[tippy title="Youtube, anyone?" header="off" width="460" height="365"]
[/tippy]
March 26, 2013 at 5:50 am
ok, found error
thanks
March 27, 2013 at 10:38 am
How to make a tippy link programatically,
what is the correct way of doing it ? I tried the following code
which does not work. In the php file you are using -> $tippyArray[ 'title' => 123]
Sorry to be such a pain
joe
March 27, 2013 at 10:44 am
Sorry my bad, here is the complete php code
‘attachment’, ‘orderby’ => ‘menu_order’, ‘order’ => ‘ASC’, ‘post_mime_type’ => ‘image’ ,’post_status’ => null, ‘numberposts’ => null, ‘post_parent’ => $post->ID );
$attachments = get_posts($args);
if ($attachments) {
foreach ( $attachments as $attachment ) {
$alt = get_post_meta($attachment->ID, ‘_wp_attachment_image_alt’, true);
$image_title = $attachment->post_title;
$caption = $attachment->post_excerpt;
$description = $image->post_content;
global $tippy;
$tippyLink = $tippy->getLink(array(‘title’ => ‘This is my link/header title’, ‘text’ => ‘This text goes in my tooltip’));
echo $tippyLink;
} }
?>
nothing gets displayed
March 27, 2013 at 12:12 pm
Joe,
Another thought occurs to me – make sure the experimental option is turned off when using Tippy in this way. The new approach adds extra (hidden) content to the end of a post, but because of how you’re adding php content, the new method would be likely to fail. Still, it should show the tippy link, just not be populated with content, so that’s probably not the only issue.
If you would, please post your code snippet again using pastebin and share the link on here, it will be a little easier to make out that way.
http://pastebin.com/
March 27, 2013 at 12:35 pm
Is it possible to have the tooltip appear on an image mouseover?
March 27, 2013 at 1:01 pm
Yes, use [tippy img="image link"]whatever[/tippy] – img with a link to the image rather than the usual title attribute.
March 28, 2013 at 7:02 pm
Hello Chris,
I’ve been using Tippy together with ESV pluggin on my Church website for some time and it is truly amazing!
However, now I wanted to install it on my personal website and it is causing a lot of trouble. The dropdown menu stopped working and random pair of arrows appeared on my slider.
Any idea why this is happening?
Bless you.
April 2, 2013 at 2:59 pm
Andrew,
Sorry for my delayed response. Have you had any luck with this? Try enabling Tippy but disabling the ESV Plugin. Does the problem occur like that?
It’s just recently been pointed out to me that the stylesheet with the ESV Plugin contains some global styles that could interfere with a site. I should be fixing that soon; it’s possible that’s what is causing your problem.
April 3, 2013 at 10:35 am
That’s OK
No I’m still having the same problem. I have tried disabling the ESV pluggin but the same problem occurs, it is definitely something inside tippy.
I appreciate all this hard work of yours. If it helps I could give you the details to my website for you to try and test it.
April 3, 2013 at 1:06 pm
Andrew, if you can provide a link where I can see what it’s doing, that would be helpful. This isn’t a problem I’ve run across or heard about before.
April 3, 2013 at 1:26 pm
OK, I can leave it on for the next few hours.
This is when tippy is off:
http://www.letuspursue.com/
and this is with tippy on:
http://www.letuspursue.com/cz/
They are two different but identical wordpress installations, the only difference is the language, everything else should appear the same.
Notice four things: the dropdown menus, the arrows on the slider, the blog post rotator not displaying properly and the contact form on “ask me” page.
If you need the details for my wordpress I can share them with you.
April 3, 2013 at 1:52 pm
An odd issue I just noticed…when using Tippy+Annie for footnotes, with the “draggable tooltips” option checked, if I have an extra-long footnote that causes a scroll bar to appear in the tooltip, when I click on the scroll bar the mouse cursor “sticks” to the tooltip, so that moving the cursor around just drags the tooltip. It will not release until I right-click.
I don’t really use the draggable tooltip option, so unchecking it resolved the issue, but I thought I would mention it in case others have experienced this.
April 4, 2013 at 4:50 pm
That is rather odd, I’ll look into it. The draggable option is made possible via jQuery rather than custom code, so it could be a quirk in jQuery, but I’ll see if I can track it down. Thanks for letting me know.
April 21, 2013 at 3:24 am
Hi Chris,
I can’t assign the attribute to Tippy title.
& text-align workse, but not the
Examples: Starting page of See-Seen or http://www.see-seen.com/watch.
Any hint why it is not possible ?
Tnx
April 21, 2013 at 3:29 am
I meant the ‘strong’ attribute
April 24, 2013 at 10:06 pm
Peter,
By default, Tippy strips styling data from the header. Earlier in the history of Tippy I had to do this to get it to work right, but it may not be necessary any longer. I’ll look into it.
April 27, 2013 at 2:39 am
Thanks for your response. I have copied the tippy.css file to the theme’s folder via FTP, but editing the “.tippy_header” line in the styles of this file doesn’t seem to have any effect on the color of the header.
Is there any other step I should be taking to enable the css file in my wordpress installation? Should I make any changes to my style.css file at all? I’m at a total loss as to why this isn’t working. I’m not really too familiar with php unless it’s a simple copy paste situation, but is there a php file that I should be looking into modifying?
I know it’s a minor thing, but it would be really helpful to be able to adjust that color.
Thanks,
Mike
April 28, 2013 at 7:14 pm
question: how do you create the same footnote at more than one location and on the same page? For example i’m currently using per night [foot] text description here…[/foot]
foot note is displaying number 1 , 2, 3….but what i want is it to display all as number 1
Hope you can help.
May 7, 2013 at 8:24 am
Steve,
That is not currently possible, but it’s an interesting idea. I’ll look into adding something like [foot id="note1"]mynote[/foot] ; [foot useid="note1" /] where the second will automatically reference the first. Behavior would be a little quirky because of how the anchor reference works between the inline annotation and the actual note at the bottom.
May 1, 2013 at 9:33 pm
Hi Chris,
is there a way to nest a sub-tippy inside tippy ?
Something like they did in another plugin like
[expand title="Root Level"]
[expandsub1 title="Nested Level 1"]
[expandsub2 title="Nested Level 2"]
etc
etc
[/expandsub2]
[/expandsub1]
[/expand]
The idea behind is to let the content of a page step by step “unfold” when hovering over the text or images.
May 7, 2013 at 8:22 am
Peter,
Unfortunately not. Since only one tooltip can be open at a time, nested tips would not be possible. I have already started looking at modifying Tippy to allow multiple tooltips at once, and such a change might make it possible to nest.
May 2, 2013 at 12:24 pm
First off, I love, love, love, this plug-in, it is beautiful. Quick question though, is there a way to change Tippy’s opacity?
May 7, 2013 at 8:20 am
Sue,
Opacity is supposed to be stylable via css but I see I’ve coded opacity inline which would override stylesheet rules. I’ll look into tweaking that, then you could set the opacity with a rule like:
body .tippy_tip { opacity: .85; }
May 8, 2013 at 3:21 am
Great plugin! I have two questions?
- I like to use the pop-up to to load a form (where users can check availability on a property for rent), can another wordpress page’s content be loaded, like an iframe?
- Any plans to make the plugin responsive?
May 11, 2013 at 11:23 am
Bea,
On the first question, you can put just about anything you like inside a tooltip, including html and shortcodes. You could try writing in the iframe to pull in content from another post/page or see if a WordPress plugin exists that lets you use a shortcode to import content from another page. A quick google turned up http://wordpress.org/extend/plugins/post-content-shortcodes/ which might accomplish that.
On the second question, I had thought about ways to make it responsive, but I’m not sure how to pull it off since there are so many ways to specify sizes.
May 17, 2013 at 6:05 am
Thanks for a great plugin!
I’m having a problem with Tippy and IE 8 – wich we unfortunatly have to use in my organization.
When i mouseover the tooltip i get the Tippy box + the browsers own yellow tooltip box with the title.
Is there a way to disable that, since i cannot do
Hope you can help.
May 17, 2013 at 11:50 am
The title attribute is a common feature of pretty much all browsers, not just ie8.
In your WordPress dashboard, go to Tippy under the Settings panel and on the right side look for the option “Use title attribute in Tippy links” – uncheck it, click save, and the yellow tooltip box should disappear.