Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 17.01.2014, 21:32
glupto glupto ist offline
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.01.2014
Beiträge: 45
glupto befindet sich auf einem aufstrebenden Ast
Standard bootstrap tooltip-Problem

Hallo, ich habe mir ein schon fast funktionierendes bootstrap-Tooltip zerschossen. Jetzt wird der tooltip - wenn ich im css "position: relative" angebe - direkt unter meiner 'li' Zeile (innerhalb von 'ul' ) angezeigt (wenn auch ohne arrow), andererseits aber die nächste 'li'-Zeile nach unten verschoben. Und obwohl ich bei der Ausgabe "data-placement: auto bottom" angebe, steht der tooltip immer unten.

Wenn ich dagegen "position: absolute" angebe, steht der tooltip inklusive arrow links oben in der Browserecke. Ich will hier nicht die ganze "bootstrap.css"-Datei angeben, aber der entscheidende Teil sieht so aus:
Code:
.tooltip {
  position: absolute;
  z-index: 1030;
  display: inline;
  font-size: 12px;
  line-height: 1.4;
  opacity: 0;
  filter: alpha(opacity=0);
  visibility: visible;
}

.tooltip.in {
  opacity: 0.9;
  filter: alpha(opacity=90);
}

.tooltip.top {
  padding: 5px 0;
  margin-top: -3px;
}

.tooltip.right {
  padding: 0 5px;
  margin-left: 3px;
}

.tooltip.bottom {
  padding: 5px 0;
  margin-top: 3px;
}

.tooltip.left {
  padding: 0 5px;
  margin-left: -3px;
}

.tooltip-inner {
  max-width: 300px;
  padding: 3px 8px;
  color: #ffffff;;
  text-align: center;
  text-decoration: none;
  background-color: #4c4c4c;
  border-radius: 4px;
}

.tooltip-arrow {
  position: relative;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}

.tooltip.top .tooltip-arrow {
  bottom: 0;
  left: 50%;
  margin-left: -5px;
  border-top-color: #4c4c4c;
  border-width: 5px 5px 0;
}

.tooltip.top-left .tooltip-arrow {
  bottom: 0;
  left: 5px;
  border-top-color: #000000;
  border-width: 5px 5px 0;
}

.tooltip.top-right .tooltip-arrow {
  right: 5px;
  bottom: 0;
  border-top-color: #000000;
  border-width: 5px 5px 0;
}

.tooltip.right .tooltip-arrow {
  top: 50%;
  left: 0;
  margin-top: -5px;
  border-right-color: #000000;
  border-width: 5px 5px 5px 0;
}

.tooltip.left .tooltip-arrow {
  top: 50%;
  right: 0;
  margin-top: -5px;
  border-left-color: #000000;
  border-width: 5px 0 5px 5px;
}

.tooltip.bottom .tooltip-arrow {
  top: 0;
  left: 50%;
  margin-left: -5px;
  border-bottom-color: #000000;
  border-width: 0 5px 5px;
}

.tooltip.bottom-left .tooltip-arrow {
  top: 0;
  left: 5px;
  border-bottom-color: #000000;
  border-width: 0 5px 5px;
}

.tooltip.bottom-right .tooltip-arrow {
  top: 0;
  right: 5px;
  border-bottom-color: #000000;
  border-width: 0 5px 5px;
}
Das Javascript:

Code:
   $(function() {
   $(".tip").tooltip();
   });
Die Ausgabe innerhalb einer php-Datei
PHP-Code:
                    echo "<li><a href=\"".htmlspecialchars(filtereLinks($link), ENT_QUOTES)."\" target=\"_blank\" 

class=\"tip\" 
data-toggle=\"tooltip\" 
data-placement=\"auto bottom\" 
data-delay=\"800\"  title=\""
.htmlspecialchars(filtereHTML($nachricht->summary), ENT_QUOTES)."\">".
                    
htmlspecialchars(filtereHTML($nachricht->title), ENT_QUOTES)."</a></li>\n"
Falls jemand eine Idee hat,...
Danke
Gruß
glupto
Mit Zitat antworten
Sponsored Links