Question

I am using the jquery tools tooltip code and I am having trouble with the background image being transparent when I dont want it to be transparent.

Here is the JS and the CSS code that is loading the tooltip bg image:

<script type="text/javascript">

    // initialize tooltip
    $("[title]").tooltip({ 
        position: "top left", 
        effect: 'slide',
        opacity: 1,
        offset: [15, 190],
        tipClass: 'small_tooltip'
        });    
</script>

<style type="text/css">

/* tooltip styling  */
.small_tooltip {
    display:none;
    background:url(/images/tooltip/white_arrow.png);
    font-size:12px;
    height:70px;
    width:160px;
    padding:25px;
    color:#255E0D;  
    opacity:1 !important;
    }
</style>

And here is the image that is being loaded :
http://static.flowplayer.org/tools/img/tooltip/white_arrow.png

Any suggestions as to how to make this image not transparent as a tool tip would be great. One other thing, when I inspect the element in firebug the css for the background shows the following even though I don’t set the background to be transparent in the styles : url(“/images/tooltip/white_arrow.png”) repeat scroll 0 0 transparent

Answer 1

The background-color will be by default transparent : http://www.w3schools.com/cssref/pr_background-color.asp

You can set it using a color, the transparent value or inherit value which

specifies that the background color should be inherited from the
parent element