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).
Related
I use Jquery-UI and accordingly the selectmenu-widget in my project. Can I disable the widget for a specific element, so that the select look and functionality returns to native?
I tried solutions mentioned in Jquery disable theming for a specific element but without success. data-role: none is not doing any change, and I can't simply remove ui-classes because the widget creates a whole new element which acts like a proxy for the select and so the select itself does not have any classes.
Any help would be appreciated.
I solved it by manually destroying the selectmenu-element and displaying the initial element again at documentReady().
I would be glad to hear about a better solution since this one is hacky and involves problems, e.g. at responsiveness if the element should be displayed just at a specific screen size, you have to handle it again manually in your function where you render the initial element back.
I want to write a sortable list using jQuery.
My thought is as follows: As the li element moves with mouse, a placeholder will be placed dymatically where the li element will be placed when mouseup event happens.
But I don't get one thing: How to make the other li elements move up and down appropriately as the placeholder moves. I don't think I should use CSS 'top' property to move these elements as this method actually doesn't change the index of each element in the list automatically. Could someone give me some idea on this? Thanks.
Actually jQuery UI allows you to choose which parts of it you want in your script. So you can choose only sortable (it will have three other dependencies, but nothing particulary large). Just go to jQuery UI homepage and click build custom download. You can get a very lightweight script this way (which you can further strip down if you choose readable code in your download).
It helps your code cross-browser compatibility and jQuery UI code is actually readable and easy to strip down of any unnecessary functionality (you can probably remove for example scrollSensitivity setter).
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?
I have some jQuery code that finds elements with the shaded CSS class and adds a div element after it. It is run in the document ready event handler.
$(".shaded").after("<div class='shader'></div>");
The shader class provides styling to make the above element look raised.
My problem is that we started using Ajax to populate content, so now I need to run the code above each time new content is retrieved using Ajax.
What I want to know is how I can detect if this dynamically added "shader" div has previously been added. I know I can find those next elements using this:
$(".shaded").next("div").hasClass("shader")
But how do I elegantly add the "shader" only to the elements that have not been shaded yet?
Thanks in advance.
$(".shaded + :not(.shader)").prev().after("<div class='shader'></div>");
works and tested
First of all, you should really solve this with CSS. But I can imagine situations where that is hard to do (*cough*IE6*cough*).
You could do it the nasty jQuery way and derive which elements already have a shader, like Mrchief's solution.
Or you take the responsible solution and keep a list of elements that have been shaded, and even better, a list of elements that still need to be shaded.
jQuery encourages you to 'abuse' your DOM for storing information about your model, while you really should just make a model and use jQuery based on the information in the model. This is exactly the reason why I'm no longer using jQuery for anything that doesn't involve very complex tasks (I still use it for animations and fancy plugins like lightboxes).
You can try something like this (untested though):
$(".shaded + :not('div.shader')").prev().after("<div class='shader'></div>");
It finds all divs with class shaded and filters out the ones that do not have a div with class .shader after them.
Thanks to #Joseph for pointing out the .prev()
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.