Jump to: navigation, search

Bootstrapskin Tool Tips

Tool Tips

Tooltip on left
Tooltip on top
Tooltip on bottom
Tooltip on right

This functionility can also be used in text, hovering over certain words will produce the Tool Tip. You can also do the same underneath. Tool Tips can be also be shown to the left, or to the right.

Tool Tips Buttons

        <div class="tooltip-demo">
          <div class="bs-example-tooltips">
            <div class="btn btn-default" data-toggle="tooltip" data-placement="left" title=""
            data-original-title="Tooltip on left">Tooltip on left</div>
            <div class="btn btn-default" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip on top">
            Tooltip on top</div>
            <div class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title=""
            data-original-title="Tooltip on bottom">Tooltip on bottom</div>
            <div class="btn btn-default" data-toggle="tooltip" data-placement="right" title=""
            data-original-title="Tooltip on right">Tooltip on right</div>
          </div>
        </div>

Tool Tips Text

    <div class="tooltip-demo">
      <div class="bs-example-tooltips">
        <p>This functionility can also be used in text, hovering over certain 
        <span class="" data-toggle="tooltip" data-placement="top" title=""
        data-original-title="Tooltip on Top">words</span> will produce the Tool Tip. You can also do
        the same 
        <span class="" data-toggle="tooltip" data-placement="bottom" title=""
        data-original-title="Tooltip on Bottom">underneath</span>. Tool Tips can be also be shown to
        the 
        <span class="" data-toggle="tooltip" data-placement="left" title=""
        data-original-title="Tooltip on Left">left</span>, or to the 
        <span class="" data-toggle="tooltip" data-placement="right" title=""
        data-original-title="Tooltip on Right">right</span>.</p>
      </div>
    </div>
bootstrapskin-commercial-skin.png