Member Avatar for nedsnurb

Hi,

Basically I am developing a website for a university project, all fine so far, site is set-up and I have managed to display a image gallery using lightbox. However I need to have tooltips on the images, which I cannot seem to get working. I have some code in place but the images mess up when I hover over them.

my code in the css :-

.tooltip {
			border-bottom: 1px dotted #000000; color: #000000; outline: none;
			cursor: help; text-decoration: none;
			position: relative;
		}
		.tooltip span {
			margin-left: -999em;
			position: absolute;
		}
		.tooltip:hover span {
			border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; 
			box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
			font-family: Calibri, Tahoma, Geneva, sans-serif;
			position: absolute; left: 1em; top: 2em; z-index: 99;
			margin-left: 0; width: 250px;
		}
		.tooltip:hover img {
			border: 0; margin: -10px 0 0 -55px;
			float: left; position: absolute;
		}
		.tooltip:hover em {
			font-family: Candara, Tahoma, Geneva, sans-serif; font-size: 1.2em; font-weight: bold;
			display: block; padding: 0.2em 0 0.6em 0;
		}
		.classic { padding: 0.8em 1em; }
		.classic {background: #FFFFAA; border: 1px solid #FFAD33; }

html

<a class="tooltip" href="images/friends/arnie.jpg" rel="lightbox[friends]"><span class="classic">This is my friend arnie, click to enlarge!</span><img class="gallery" src="images/friends/arnie_small.jpg" alt="friend 1" /></a>

I have uploaded an example picture to highlight the issue.

Secondary Question was less important but im looking at putting in a RSS feed, again first time of doing this in a website so any pointers/tutorials?

Many Thanks

example.jpg 239.38 KB
  • 3 Contributors
  • 4 Replies
  • 106 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by nedsnurb
Member Avatar for drjohn

Just give each link a title, which will appear as a tooltip for you with absolutely no effort required. No special tooltip code required what so ever.

<a href="images/friends/arnie.jpg" rel="lightbox[friends]" title="This will show up as a tool tip when the mouse is hovering"><span class="classic">This is my friend arnie, click to enlarge!</span><img class="gallery" src="images/friends/arnie_small.jpg" alt="friend 1" title="While this bit will appear as the cation in the lightbox, okay?" /></a>
Edited by drjohn because: n/a
Member Avatar for nedsnurb

cheers drjohn for the fast response, although this is what I am looking for I believe that I need to specifically use css for the tooltips.

Member Avatar for Arkinder

You're using both float: left; and position: absolute; , only one is needed and putting only cancels one out. Also, when using float: left; or position: absolute; the element is removed from the normal flow of the page. Try using top and left to position the image where you would like it.

Regards, Arkinder

Member Avatar for nedsnurb

thanks for the reply arkinder, I have now sorted the issue, albeit all I did was take out the

.tooltip:hover img

which seemed to work.

regards to the RSS issue, obviously I have'nt got a http address for the site, but would creating a live rss feed involve creating an xml file with the items and channels and then validating an publishing?

also is it possible to embed an rss into a site, and would this take much effort?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.