Wie erstellt man ein Facebook-ähnliches Tooltip-Layout mit Twitter Bootstrap?

Question

Ich versuche, Twitter Bootstrap zu verwenden, um ein Tooltip-Layout zu erstellen, das Facebook ähnelt.

Es wäre wirklich nett, wenn mir jemand sagen könnte, wie ich Twitter Bootstrap verwenden kann, um dieses Layout zu erstellen. Ich brauche es nicht als Tooltip, sondern in einem normalen div.

Ich habe ein Bild angehängt, das zeigt, wonach ich suche.

Answer 1

Hier ist mein Beitrag zu diesem Feld unter Verwendung des Twitter-Bootstrap-Frameworks. Musste einige Spannweiten anpassen, um den Bildgrößen gerecht zu werden, aber ich habe eine ID verwendet, um sie gezielt ansprechen zu können, sodass sie andere span*-Klassen im Seitenlayout nicht stören.

Ich habe es auf einem jsFiddle hochgeladen, da es ziemlich viel Code ist, also schau es dir an: Demo hier, Bearbeitung hier.

CSS:

body {
    margin:50px;
}

#box {
    border: 1px solid #92959C;
    width:290px;
    padding-top: 10px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
    -webkit-box-shadow: 0px 0px 4px 0px #ccc;
    -moz-box-shadow: 0px 0px 4px 0px #ccc;
    box-shadow: 0px 0px 4px 0px #ccc;

}

#box .row {
    margin-left: -10px;
}

#box [class*="span"] {
    margin-left: 10px;
}

#box .span0 {
    width:32px;
    margin-left:1px;
}

#box li.span0:first-child {
    margin-left: 0;
}

#box .span1 {
    width: 96px;
}

#box .span2 {
    width:165px;
    margin-left:10px;
}

#box .span2 p, .span2 a {
    font-size:12px;
    margin:0;
}

#box .span2 h4 {
    font-size:13px;
    line-height:10px;
}

#box .span1 img {
    width:96px;
    height:96px;
}

#box .img-list {
    margin:0;
    padding:0;
    list-style:none;
}

#box-footer {
    margin-top:10px;
    width:290px;
    border-top:1px solid #aaa;
}

.gray {
    background-color:#F2F2F2;
    padding:10px 10px 20px;
    min-height:20px;
}

HTML:

                Omer
                AI Lead bei Neuer Markenanalyse
                64 gemeinsame Freunde

                        Freunde