Tooltip with html

by Cal Francesco

HTML

<div class="wrapper">Login
    <span rel="tooltip" 
    data-toggle="tooltip" 
    data-trigger="click" 
    data-placement="right" 
    data-html="true"
    data-title="Etiam vel convallis urna. Sed venenatis orci et lectus dictum pretium. Nullam a purus dolor. Quisque consequat, dolor in ornare facilisis, velit ex tempor elit, id aliquet mi ex nec velit. Praesent quis feugiat leo. Donec porta felis nunc, ut placerat velit facilisis malesuada. Phasellus placerat velit id felis lobortis ultricies. Mauris vehicula pretium turpis, blandit malesuada nisl semper sed. Proin vitae elementum nunc. Morbi ac bibendum eros. Nam sed mi in nunc finibus suscipit non et velit. Nullam efficitur placerat tortor, id convallis purus condimentum quis.">
    <span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>
    </span>
</div>

CSS

.tooltip-arrow{margin-top:-13px}
.tooltip-inner{margin-top: 65px}
.wrapper {
  width:200px;
  padding:10px;
  margin:10px;
  background-color: red;
  color:#fff;
  position:relative;
  top:50px;
}
span {
  cursor:pointer;
}
.tooltip-inner {
    padding:5px 10px;
    text-align:left;
}
.glyphicon {    
    position: relative;
    top: 3px;
}
.margin-left {
    margin-left:60px;
}

JavaScript

$('[rel="tooltip"]').tooltip();