Anyone know a good alternative to the flowplayer tooltip? I need same functionality of HTML content with Tip remaining active when mouseenter inside of tooltip as the below demo shows. Also need tooltip to close onclick
http://flowplayer.org/tools/demos/tooltip/any-html.html
I prefer qTip2. It does everything you'd ever need a Tooltip plugin to do. It comes preloaded with several CSS themes and the best part is that the developer answers questions in his forum on a daily basis.
http://qtip2.com/demos
http://qtip2.com/guides
EDIT 8/28/13
Now I prefer a jQuery plugin called Tooltipster. Mainly because it's much easier to configure, and I don't have to do anything to the CSS because I already like how it looks.
http://calebjacob.com/tooltipster/
I use tooltipsy, this is an EXCELLENT tooltip program. You can set it to do pretty much anything you want. If you want custom CSS, okay, if you want to set your own show and hide events, okay, you can change what the tooltip aligns to, the delay until it shows, you can do whatever you want. Tootipsy is the best one I ever used. (I had to make a little modification to it to get it to use HTML in the tooltips though, but it's a very simple change)
What about Prototip?
Related
I'm trying to create this Icon Animate effect for my personal work. As they are using images to draw icon on hover. Any other trick to use this one. Please advise
Live Working Link
http://puu.sh/pAksc/8c81c44718.png
Man... I think you don't understand at all what you are talking about ...
Here are some things you should try and understand first.
First, have you tried any piece of code or looked for a tutorial ?! Usually if you post a question on Stackoverflow, you're not asking people to do your job, you must first have tried things and have a code example to show...
Start here : https://css-tricks.com/svg-line-animation-works/ This should do what you want to do.
Then you just have to trigger the animation on div:hover
Second this won't work with a png. This only work with specific SVG images. First take a look at what an SVG image is and how to work with it in HTML/CSS.
Third you don't need any jQuery here so leave that aside if that's the only thing that requires jquery in your website.
I´m currently developing my first jQuery Plugin. It´s called Fraction Slider and is a Slideshow-Framwork which allows you to animate unlimited elements (with different animations, delay, etc) per slide.
Here you can find a small demo, and also the documentation:
Demo
It´s also hosted in the jQuery Plugin repository
So, introduction is over ;)
Now i have a few question:
The general code. What could i improve, what should be replaced, etc.
As you can see, when us different animations, delays, speeds etc. the html tag for each element will have an awfully lot of data-... attributes. I would like to make that a bit more easy and maybe with less markup (damn, i dont know how to say this in english).
How could i do that - any ideas or suggestions?
What should i add to the plugin? I was think about pager/controls, fading and simple show/hide effect and maybe making it responsive.
Last but not least: i would be happy to get some general feedback about the plugin and its realization.
Looks like it doesn't support chaining. e.g.
$('.step-slider').fractionSlider().remove();
Background: I would like a better replacement for the default title tag tooltip, one that would at least allow me multiple lines across all browsers. The problem is that the title tag gets updated once per second.
Is there a JavaScript/jQuery plugin that can be attached to an element, and update itself as the title attribute changes? I guess it shouldn't be that hard to implement from scratch, but there is no need to reinvent things.
I'm not sure if this would be overkill for you cause, but I use this jQuery plugin: http://craigsworks.com/projects/qtip2/
In my opinion it's the best tooltip plugin out there.
Every time our title changes you could use one of its events (render() maybe).
i was wondering if anybody knows (and if there is such a thing) a javascript plugin that can do to following:
on the website http://www.worldofmerix.com/ click on any of the menu buttons on top for eg. "about us"; then you see a line appear in the middle and expand so that you can see the entire div...
I need a similar animation effect, flash is out of the question, so i have to use javascript...
i have some ideas on making it with some "smooth div fade in/out" js plugins, but i was wondering if there is a plugin SPECIFIC to the thing i need?
thanks very much in advance for the anwsers!
Ok, since you didn't state any jQuery "dont-wanting" I'd recommend you to check out jQuery. It is a set of JavaScript libraries that help you manage your HTML and CSS with some light code.
You can see HERE, HERE and HERE how it can animate divs and other elements (I see that it is what you need).
You can check out the official web site and there you can find all kinds of examples and documentation that you will ever need. I recommend you to see THIS (click RUN).
I'm looking for a javascript/css tooltip that can do the following:
Shows up when you hover over some page element (such as a help icon.)
Repositions itself based on the browser window (for example if it's on the far right of the page, it will show itself to the left of the page element, otherwise it'll show to the right of it. That way it won't go off of the page.)
You can hover over the tooltip and it won't disappear. This way you can select text or click on a hyperlink within the tooltip.
I'm using dojo but their dijit tooltip seems to be very inflexible, as it can only spawn off of another dijit element, most commonly a dijit button. I'd rather not having to reference a whole other javascript framework like jquery or prototype so hopefully someone has a way to do this using just one basic script.
Unfortunately for you, the tooltip style plugins available for Dojo are nowhere near the other frameworks (namely: jQuery). Because of this, you have three options:
Reinvent the wheel. Take what you learned from other tooltip scripts and build your own from scratch. This option takes the longest development time (and in the inevitable maintenance of cross-browser bugs).
Extend an existing plugin. You can take a current tooltip plugin for dojo (or perhaps a library agnostic plugin) and extend its functionality by adding your own scripts to it.
Use jQuery. This has already been said twice by others, but let me say it again. jQuery has a thriving plugin ecosystem, and if development/maintenance times are truly important to you, then jQuery should definitely be considered.
Again, assuming that you don't mind using jQuery (it's awesome!!) I played around with a few tooltips and found this one the best: http://flowplayer.org/tools/tooltip/index.html
Extensible with good documentation. Check out the 'position' config option and see if that does what you need.
Good luck!
If you do decide to use jQuery, qTip is a nice jQuery plugin that is very configurable and will probably meet your needs. http://craigsworks.com/projects/qtip/
I have been using several jQuery plugins, including jQuery TOOLS, Beauty Tips and Cluetip. I think all three meet your requirements.
If instead of a black box you want to know what's going on, I recommend this tutorial:
http://www.sohtanaka.com/web-design/simple-tooltip-w-jquery-css/
(and take a look at the comments section)
The dijit.Tooltip documentation gives two simple examples, the first attaching a tooltip to simple DOM nodes seems to meet your needs. The second happens to wire up the tooltip to another dijit-based widget (a button). Note that the property connectId takes a dom node reference or string id. Note that dijit may be used either programmatically or using a markup-based declaration.
Different tooltip implementations may have different functionality. Among other things, dijit.Tooltip provides ARIA accessibility for screen readers, keyboard access, bidi enablement, and automatic positioning around a node but within the boundaries of the screen.