Pytanie o tooltipa Opcje

[Lampek]

Witam
Mam problem otóż mam zrobioną tabelę w niej mam diva z kodem slidera jquery w którym po najechaniu na dany slajd ma sie wyświetlić tooltip z adresem www. Problem polega na tym, że sam tooltip działa jak potrzeba tzn tak:Klik natomiast działa u mnie to poprost nie tak jak trzeba tzn tak: Klik . Poprostu tak jakby tooltip nie wychodził poza obręb tabeli w której się znajduje. Jest jakiś sposób żeby to ominąć a tooltip wyświetlał się na wierzchu żeby go było widać całego?

[Niktoś]

Bez kodu trudno cokolwiek powiedzieć, w sekcji head(nagłówku) masz zapewne ustawione overflow:hidden i dlatego tobie ucina tooltipa bo jest on po prostu za duży, ale bez kodu po prostu można tylko zgadywać.

[Lampek]

No zgadza się mam w css od sldera w którym ma działać te tooltip mam overflow: hidden no ale jest to potrzebne do prawidłowego działania slidera. Ps który kod mam Ci podać jak coś do sprawdzenia?

Ma może ktoś jeszcze jakiś pomysł?

[prowseed]

skoro tooltip css, to moze po prostu nadac mu jakas duza wartosc z-index?

//EDIT
Heh, najlepiej, to pokaz to on-line?
Zespuł mi się samochód, nie chce ruszyć, mój samochód wygląda tak, co może nie działać...? - tak wygląda teraz Twoje pytanie.

Ten post edytował prowseed 26.02.2012, 22:24:28

[Lampek]

Co do z-index próbowałem nie działa :/ jutro postaram sie pokazac online. Narazie wrzucam kod
HTML odpowiedzialny za wyświetlanie slidera i tooltipa:

[HTML] pobierz, plaintext 
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td valign="middle" class="sponsorzy">
      <div id="wrap" align="center">
  <ul id="mycarousel" class="jcarousel-skin-tango">
  	<li><a href="#" class="tip_trigger"><img src="images/hd1.png"/><span class="tip"><img src="images/hd.png" /></span></a></li>
 
    <li><a href="#" class="tip_trigger"><img src="images/hd2.png"/><span class="tip"><img src="images/hd.png" /></span></a></li>
    <li><a href="#" class="tip_trigger"><img src="images/hd3.png"/><span class="tip"><img src="images/hd.png" width="124" height="70" alt="" /></span></a></li>
    <li><a href="#" class="tip_trigger"><img src="images/hd4.png"/><span class="tip"><img src="images/hd.png" width="124" height="70" alt="" /></span></a></li>
    <li><a href="#" class="tip_trigger"><img src="images/hd5.png"/><span class="tip"><img src="images/hd.png" width="124" height="70" alt="" /></span></a></li>
    <li><a href="#" class="tip_trigger"><img src="images/hd6.png"/><span class="tip"><img src="images/hd.png" width="124" height="70" alt="" /></span></a></li>
    <li><a href="#" class="tip_trigger"><img src="images/hd7.png"/><span class="tip"><img src="images/hd.png" width="124" height="70" alt="" /></span></a></li>
    <li><a href="#" class="tip_trigger"><img src="images/hd8.png"/><span class="tip"><img src="images/hd.png" width="124" height="70" alt="" /></span></a></li>
    <li><a href="#" class="tip_trigger"><img src="images/hd9.png"/><span class="tip"><img src="images/hd.png" width="124" height="70" alt="" /></span></a></li>
    <li><a href="#" class="tip_trigger"><img src="images/hd10.png"/><span class="tip"><img src="images/hd.png" width="124" height="70" alt="" /></span></a></li>
    <li><a href="#" class="tip_trigger"><img src="images/hd11.png"/><span class="tip"><img src="images/hd.png" width="124" height="70" alt="" /></span></a></li>
    <li><a href="#" class="tip_trigger"><img src="images/hd12.png"/><span class="tip"><img src="images/hd.png" width="124" height="70" alt="" /></span></a></li>
    <li><a href="#" class="tip_trigger"><img src="images/hd13.png"/><span class="tip"><img src="images/hd.png" width="124" height="70" alt="" /></span></a></li>
    <li><a href="#" class="tip_trigger"><img src="images/hd14.png"/><span class="tip"><img src="images/hd.png" width="124" height="70" alt="" /></span></a></li>
    <li><a href="#" class="tip_trigger"><img src="images/hd15.png"/><span class="tip"><img src="images/hd.png" width="124" height="70" alt="" /></span></a></li>
    <li><a href="#" class="tip_trigger"><img src="images/hd16.png"/><span class="tip"><img src="images/hd.png" width="124" height="70" alt="" /></span></a></li>
    <li><a href="#" class="tip_trigger"><img src="images/hd17.png"/><span class="tip"><img src="images/hd.png" width="124" height="70" alt="" /></span></a></li>
    <li><a href="#" class="tip_trigger"><img src="images/hd18.png"/><span class="tip"><img src="images/hd.png" width="124" height="70" alt="" /></span></a></li>
    <li><a href="#" class="tip_trigger"><img src="images/hd19.png"/><span class="tip"><img src="images/hd.png" width="124" height="70" alt="" /></span></a></li>
    <li><a href="#" class="tip_trigger"><img src="images/hd20.png"/><span class="tip"><img src="images/hd.png" width="124" height="70" alt="" /></span></a></li>
  </ul>
 
</div>
    </td>
  </tr>
</table>
[HTML] pobierz, plaintext 

css od tooltipa i klasy sponsorzy

[HTML] pobierz, plaintext 
.tip {
    color: #fff;
    background:#1d1d1d;
    display:none; /*--Domyślnie ukryty--*/
    padding:10px;
	margin-left: -500px;
    position:absolute;    z-index:1000;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
 
}
 
.sponsorzy {
	background-image:url(images/1stCut_02.png);
	height:77px;
	background-repeat:repeat-x;
	vertical-align:middle;
}
[HTML] pobierz, plaintext 

[bzeebzee]

Kiedyś napisałem sobie mały skrypcik tworzący coś na wzór tooltipa w którym miał wyświetlać się tytuł zdjęcia z galerii. Może się przyda:

[HTML] pobierz, plaintext 
function flyingTitle() {
    var title;
    $('.photos img').mousemove(function(e) {                                     // wyświetlanie tooltipa tylko gdy myszka znajduje się na zdjęciem
        $('.flyingTitle').html($(this).attr('title')).css('display', 'block');       // pobieranie tekstu do tooltipa, tutaj wykorzystałem znacznik title
        $('.flyingTitle').css('left', e.pageX+15);                                      // obliczanie pozycji tooltipa w oknie przeglądarki, względem wskaźnika myszki
        $('.flyingTitle').css('top', e.pageY-4);
    }).mouseout(function() {
        $('.flyingTitle').css('display', 'none');
    })
    $('.photo_nav').mouseover(function() {
        $('.flyingTitle').css('display', 'none');
    });
}
[HTML] pobierz, plaintext