vb.org Archive - CSS tooltip help

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- vB3 Programming Discussions (https://vborg.vbsupport.ru/forumdisplay.php?f=15)

- - CSS tooltip help (https://vborg.vbsupport.ru/showthread.php?t=170058)

petteyg359

02-09-2008 03:54 PM

CSS tooltip help

I'm using the following in the extra CSS section of a style to create tooltips.

Code:

a.info{

 position:relative;

 color:#C0C000;

 text-decoration:none;

 z-index: 24;

}



a.info:hover{

 background-color:#111111;

 color:#CC0000;

 z-index: 25;

}



a.info span{

 display: none;

}



a.info:hover span{

 display: block;

 position: absolute;

 top: 10px; left: 0;

 width: 24em;

 padding: 5px; margin: 10px; z-index: 100;

 border:1px solid orange;

 background-color:#000000;

 filter:alpha(opacity=90);

 -moz-opacity:0.9;

 opacity:0.9;

 color:#C0C000;

 text-align: left;

}

HTML Code:

<a class="info">text<span>tip</span></a>

for displaying them.

I have been trying to make the tooltips be variable width (fit contents) rather than fixed, but if I remove the width attribute or do width: auto; then every tooltip is very narrow (about 56px). They also float _behind_ tcat and thead elements of vB tables, and I need them to be on top. Played with the z-index values and can't figure out where it's wrong.

cheesegrits

02-09-2008 10:29 PM

The z-index thing doesn't seem to be a problem on my vanilla 3.7b4 board. I embedded your example tip into the FORUMHOME tcat header, and it displays properly.

Offhand the only way I can think of having the width work the way you want would be to use "width: auto; white-space: nowrap;", but this will only work if your tooltips are all short enough one liners that they don't walk off the page.

-- hugh

All times are GMT. The time now is 10:09 AM.

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.00994 seconds Memory Usage 1,711KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (1)bbcode_code_printable (1)bbcode_html_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)post_thanks_navbar_search (1)printthread (2)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: