0

i got a problem with a Tooltip effect using jQuery and CSS.

I want to make a overview of a room and the seating arrangements. On every seat there is one person which got a picture and some information. The room itself has around 60 seats.

I have a picture which I placed in the background

#sitzplatzverteilung { width: 516px; height: 360px; position: relative; margin: 20px 0px; background: url("6x12x8_sitzplan.jpg") no-repeat; border: 1px solid;}

next I got a seat

.platz { width: 39px; height: 50px; position: absolute; cursor: pointer; font-size: 11px; font-family: arial; border: 1px solid; }

and I got the info which I want to show on a mouseover

.platz_info { display: none; background-color: #ffffff; border: solid 1px #abaaac; width: 250px; padding: 3px 5px; border: 1px solid; }

every seat got its own position on the picture. I placed the .platz over every seat with

#platz1 { top: 73px; //next one got different top and left left: 2px;}

my html for the seats (body)

<div id="sitzplatzverteilung"> <div id="platz1" class="platz"> <div class="platz_info"> <img src="person1.jpg" /><br> Test Text1 </div> </div> <div id="platz2" class="platz"> <div class="platz_info"> <img src="person1.jpg" /><br> Test Text2 </div> </div> </div>

my script to show the tooltip

 $(document).ready(function(){ $(".platz").mouseenter(function(){ $(".platz_info").hide(); $(".platz_info", this).show(0); }); $(".platz_info").click(function () { $(".platz_info").hide(); }) });

Now my problem is, if I mouseover one of the seats (platz1 platz2) my tooltip shows up. But the position on which it is shown is relative to the seat. So every tooltip opens up directly on / next to the seat which I mouseover.

I already tried to give it a top and left which only places it a bit away from the each seat. But I want the tooltip to open on a fixed position. Also with a float:right / left it only places the tooltip on left or right edge of the seat.

Is there any possibility to give the tooltip (platz_info) a fixed place to open up in?

Improve this question
2
  • This is much easier to get an overview with a Fiddle Commented Jun 4, 2014 at 7:53
  • It's tough to visualize exactly what you are looking for but you could try to add absolute positioning to .platz_info then adding positive or negative margin to position it. Commented Jun 4, 2014 at 8:01

3 Answers 3

Reset to default
1

If you wan the tooltip to always appear at a specific position, You don't need multiple elements at all for each tooltip. You can position one element at the desired position and change it's content according to the seat that is hovered, as follows: 

 $(document).ready(function () { $(".platz").mouseenter(function () { $(".platz_info").text($(this).text()).show(0); }); $(".platz").mouseleave(function () { $(".platz_info").hide(); }); $(".platz_info").click(function () { $(".platz_info").hide(); }) });

JSFiddle

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

Just as a little extra something, you can achieve this without any Javascript/JQuery so it works no matter what. Although it does require more code when it comes to HTML & CSS. Just format your HTML something like this: 

<div id="container"> <div id="pic1">pic1</div> <div id="tip1">This is your info</div> </div>

With this CSS:

#container { position: relative; width: 80%; height: 300px; margin: 20px auto; background-color: burlywood; } #pic1 { position: absolute; top: 40px; left: 40px; width: 50px; height: 50px; border: 1px solid black; } #tip1 { position: absolute; z-index: 99999; top: 20px; left: 65px; height: 25px; padding: 6px; border-radius: 20px; border: 1px solid black; background-color: slateGrey; opacity: 0; } #pic1:hover + #tip1 { opacity: 1; }

Here is a DEMO

NOTE: My CSS has some obvious extra styling rules and you would have to repeat it for every instance so JQuery might be better but this will work on any browser no matter what.

Improve this answer

2 Comments

Here's one that doesn't require styling repetition: jsfiddle.net/shodaburp/aLjkg
Best option would probably be to apply a class to each tip for styling then a separate id for positioning. Cuts way down on keystrokes. If you want different positions for each tip there is no way to get around writing the CSS for each one.
0

Yes it can be done. It's .platz_info that needs to have position: absolute;

Check out this fiddle: http://jsfiddle.net/shodaburp/Rzmv6/

Improve this answer

2 Comments

wow, how could i have not seen this. thanks alot for the fiddle. it worked perfect. i only had to change my #platz1 and so on from top left to margin-top and margin-left and give them a float: left so they are placed side by side. thank alot for the fast help
this won't work with the original CSS. according to original css, .platz is a positioned element. and i don't see any explanation on having to remove position from .platz

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.