Transparent popups

Hello,
I am having an issue being able to see the popups when I hover over them with my mouse. Is there a way to put a color background on them so they are visible at all times?
I do realize that it could be my template that is creating the issue.

I the image I hovered over "Date" and it gives a popup that says, "Click to sort by this column." Kind of hard to read.

It's indeed a template issue. SermonSpeaker uses the Joomla tooltip function for those popups.

I wrote a FAQ entry a year ago where I explained how the tooltips (and pagination) can be fixed in case they don't look well. Have a look at the FAQ: sermonspeaker.net/faq.html .

I have to say that this guide probably is no longer valid for Joomla 3.x as here, Bootstrap tooltips are used and they probably have a different markup.
You can have a look at \media\jui\less\tooltip.less to see what the Bootstrap styling would be.

Thank you Thomas.
I used the the code in the FAQ and it did exactly what I wanted it to do which was put a background on the tooltip pop-ups. However, after I updated joomla to 3.1.5 it did away with tooltip pop-ups for menu items but it is still there for the download button, which is really what I need.

I'm not sure what Markup it uses there. But I would guess it's still either the old one or then it's Bootstrap one. tip-wrap, tip-title, tip-text, tip-top and tip-bottom seem to be the classes used for it.

Uh oh. Now I have a whole new problem. I updated sermon Speaker to 5.0.3 and all of my formatting in css is gone. I had alternating different color rows but now gone.
Also when hover over the title of a column the whole column shifts around to make room for the tooltip. I have attached a before and after of the column shifting.

Thank you for your input.

You forgot the pictures

But anyway, SermonSpeaker 5.x is written especially for Joomla 3.x and thus uses Bootstrap markup ( getbootstrap.com/2.3.2/ ). A true Joomla 3.x template is supposed to support that markup either by including Bootstrap itself or by providing own rules which match that markup.
It sounds like your templates doesn't do that.

The SermonSpeaker layouts also follow the layouts used in core. You can try it if you test it with the default template "Protostar".

For the alternating rows: There is the class "table-striped" ( getbootstrap.com/2.3.2/base-css.html#tables ) which does exactly that.