CSS driven, tabless tooltip

After much reading I can't find out if a variation of the standard tooltip is available.
The out of the box tooltip is a concoction of very rigid nested tables which does not allow for CSS driven styling that can be accomplished using CSS and divs. With some tweaks I was able to go from this:



To this:



While leaving the various templates still in control of the tooltip styling.

However I am aware that editing core code is not supported, so I was wondering if there is something better available in Joomlapolis that I haven't found just yet.

Thank you for your input.

Don't understand the issue. It can be styled perfectly fine. See CB Bootstrap for example where it completely restyles it to match Bootstrap tooltips. The tooltip API is built into CBs core and used too extensively at this time for us to change it, but we've plans to change it in a later release.

Well, there is no need to load the whole bootstrap style sheet if one doesn't want to use it only to add box-shadow and border-radius properties to a div. Moreover table corners cannot be rounded and consequently don't look quite good when inserted in a rounded corner container.

Anyway, I appreciate your help and input, I'll keep hacking away to obtain my desired results while waiting for a release on this sense.

Thank you Kyle.

Moreover table corners cannot be rounded and consequently don't look quite good when inserted in a rounded corner container.

Please see the below screenshot of the CB Bootstrap styling.



Rounding the corners has nothing to do with the element. Border radius works the same on divs as it does on tables. See CB Bootstrap styling as a border radius is applied to the div surrounding the tooltip table then a border radius is applied to the table it self. This gives a nice rounded outer and inner corner display.

I suggest reviewing CB Bootstrap template CSS file for the #overDiv styling to get started on your own rounded corner usage if you'd like similar look.

At any rate when we do replace the tooltip API it'll be completely div driven, but I've no idea when that's going to happen.

Border radius works the same on divs as it does on tables.

That's correct, unless you need to add a border to a table in which case the table is rendered with squared corners.

More issues concerning nested tables in general:

• Accessibility - People with bad sight using screen readers might not be able to have content read back to them
• Mobile devices - Table structures do not display well in small screens
• Speed and bandwidth - Websites with high volume of traffic want/need to keep their bandwidth usage to a minimum. Delivering all that HTML might seem insignificant for small websites but it's an unnecessary burden for larger ones.
• Last but not least - I hate tables with a passion...but that just me. :silly:

Anyway, the image included in my first comment is that of the modified tooltip structure stripped of all tables that have been replaced with divs in overlib_all_mini.js and looks great in mobile devices as well. All remaining code has been left alone.

Have to say CB is such a great product and an invaluable tool, I'm having a lot of fun just playing with it and seeing what it's capable of. Great work you guys