Question Kunena - Tool Tip CSS - Make tool tip look better

Hi,

The attached image will explain - How to make the tool tip look better as shown in attached image? I want to find the css to edit the tooltip.

In the attached image, both use kunena.

I use Joomla 3.2 and latest version of Kunena.

Thanks

G'day, tjjj, and welcome to Kunena.

When I first looked at this topic I thought to myself, "What a great idea!" ... until I looked at the forum on this site ( www.kunena.org ) and I discovered that the default tooltip here is almost the same as what you want but that the tooltip here does not look anything like the tooltip on your website! :pinch:

And here I was thinking I might even use your idea as a nice added feature in new websites that I build! Well, there goes that opportunity to make a few extra dollars ...

tijj wrote:

I use Joomla 3.2 and latest version of Kunena ...

Doesn't everyone? :dry: For your information, I use J! 3.2.3 (with the standard Protostar template) and K 3.0.5 on my test sites.

It may help if you watch the video vimeo.com/69818669 . I have a feeling that the reason you are not seeing the tooltip like you see it here at www.kunena.org is because your Joomla site template has an overriding CSS rule that changes the Kunena tooltip CSS. It may be also be helpful to read My Joomla site template makes a mess of Kunena ...

Hi,

Thanks for your reply.

Well, I am trying to make the tooltip look like on this site - NoNumber Kunena based Forum

I just dont know where the CSS is because firebug and chrome developer tool window cannot follow a hovered tooltip.

I just checked protostar template and it shows the same default tooltip as my template. So I guess I want to override the tooltip css instead of showing the default tooltip.

Thanks

Can I ask you something, please? When you look at this website here ( www.kunena.org/forum ) and you hover your mouse over a topic, what do you see? Do you see the tooltip with a solid black border and a yellow background, or do you see something else?

Is the tooltip effect at this site something like what you would like to see on your website? :dry:

When I look at this website here ( www.kunena.org/forum ) and I hover my mouse over a topic, - I see a solid black border with yellow background tooltip - Just like the attached image.

How do I change this to my own needs - Just need some help to find the css?

I am sorry but I was pretty clear in my first post and have a neat and clean image attached to the post with red comments showing what I am looking for. I know your time is VALUABLE and I really dont like taking up someone's time unnecessarily because I know your time is important!

First Post:

The attached image will explain - How to make the tool tip look better as shown in attached image? I want to find the css to edit the tooltip.

Second Post:

Well, I am trying to make the tooltip look like on this site - NoNumber Kunena based Forum
I just dont know where the CSS is because firebug and chrome developer tool window cannot follow a hovered tooltip

Thanks

tijj wrote: When I look at this website here ( www.kunena.org/forum ) and I hover my mouse over a topic, - I see a solid black border with yellow background tooltip - Just like the attached image.

I see something entirely different. I see a slightly grey background with a slightly shadowed border. It's been like that since K 1.5.

What web browser (and version) are you using?

I tried all my browsers and I see the same kind of tooltip - I see a solid black border with yellow background tooltip

chrome - version 33.0
Internet explorer - version 11
Mozilla firefox

Thanks

tijj wrote: When I look at this website here ( www.kunena.org/forum ) and I hover my mouse over a topic, - I see a solid black border with yellow background tooltip - Just like the attached image.

I am attaching 4 images.

These show clearly what the default tooltip looks like for each of the browsers:

Mozilla Firefox 27.0.1
Internet Exporer 11.0.3
Google Chrome 33.0
Safari 5.1.7

I can assure you that I have not doctored the images. I can also assure you that these images clearly show the default tooltip effect. (I've even tried this out on 8 different PCs running different operating systems including, Internet Explorer 8 on Windows XP even though K 3.0.5 does not truly support IE 8[ - and I can tell you that the effect is the same^* .)

I think you should try to look at this page again from a different PC.


_____________________
^* Because IE 8 does not support CSS 3.0 and therefore does not support colour gradient (the effect is used in the Blue Eagle template), In IE 8 the tooltip shows as a solid colour - slightly yellowish - but the border is still shadowed.

It seems to be a different with which OS your run this site. Under Linux and Firefox i'll get the yellow background and Black border. If i run the site with chromium or opera i'll get the tooltip with a softly transparent black background. Hope it helps. :whistle:

Thank you for sharing that useful information, supercraft. Indeed, when I wrote earlier that I tested the situation using different browsers on different PCs I did not try testing on a Linux platform. The point that I am trying to make is that it may not matter what CSS is written for a website if the rendering engine on the client browser is incapable of displaying it "properly".

I ran my tests on the following devices:

Compaq Presario desktop	Windows 7 SP1 (64-bit)
Acer Aspire V5 (laptop)	Windows 8.1 (64-bit)
Asus Ultrabook (laptop)	Windows 8.1 Pro (64-bit)
Compaq Presario (desktop)	Windows 8.1 Pro (64-bit)
Compaq Presario (desktop)	Windows 7 SP1 (32-bit)
HP Pavilion (desktop)	Windows 7 SP1 (64-bit)
Acer Aspire (desktop)	Windows 7 SP1 (64-bit)
Asus (desktop)	Windows XP Professional SP3 (32-bit)

I understand that it is possible to run different browsers (including, FF, Google Chrome, IE 11) on a Linux box, but I haven't tried this because I don't have a Linux box and I do not know whether it's this that is causing the CSS not to render the tooltip as I see it rendered on the computers that I am using. Maybe someone else can confirm that Linux behaves differently with those other browsers, too?

I would like to know more about what platform tijj is using.