Ability to use default Bootstrap Javascript "Components"

Fold

tsangk 20 Oct 2013 01:27

Bootstrap comes with a couple of basic (but pretty darn awesome) jQuery based plugins to make websites more awesome. There is a lot of documentation over at the Get Bootstrap website.

An example of these awesome features is the tooltip. The HTML embed-able markup is:

<a href="#" data-toggle="tooltip" title="first tooltip">Hover over me</a>

or this, in Wikidot markup:

[[a href="#" data-toggle="tooltip" data-original-title="first tooltip"]]Hover over me[[/a]]

Live code: Hover over me

From what I understand (I may be wrong) — by default, these tooltips will not be initiated. The Bootstrap demo site itself uses the following Javascript code to initialize all the data-toggle="tooltip" on $(document).ready():

    // tooltip demo
    $('.tooltip-demo').tooltip({
      selector: "[data-toggle=tooltip]",
      container: "body"
    })

If this could be done on all the different types of Javascript plugins: the popover, the carousel, the tabs, etc… it would make an awesome addition in functionality :D

Kenneth Tsang (@jxeeno)

Reply Options

Unfold Ability to use default Bootstrap Javascript "Components" by

tsangk, 20 Oct 2013 01:27

Fold

Re: Ability to use default Bootstrap Javascript "Components"

jjs 12 Oct 2014 09:28

Bootstrap Tooltips and popovers would be useful in many cases. Could it be possible to use them with Wikidot somehow?

___TTT___/ http://www.trumpetexercises.net
(_|||_) \ - Janne

Reply Options

Unfold Re: Ability to use default Bootstrap Javascript "Components" by

jjs, 12 Oct 2014 09:28

Fold

Re: Ability to use default Bootstrap Javascript "Components"

Timothy Foster 13 Oct 2014 20:21

You can use a basic form of tooltips by using James Kanjo's inline hovertips. If you are using the Standard Theme, then this will already be done for you. Otherwise, you would need to add the following CSS:

/*  Inline Hovertips by James Kanjo (!INHV)
==============================================================================*/
.hover{
    display: inline-block;
    background: none;
    height: 1.42857em;
    margin-bottom: 3px;
}
.hover:hover{
    background: url('http://css.wikidot.com/local--files/theme:standard-theme/hovertipBelow.png');
    background-repeat: no-repeat;
    background-position: center calc(1.42857em - 2px);
    height: calc(1.42857em + 3px);
    margin-bottom: 0;
}
.hover span{  transition: none; }
.hover:hover span{
    border: none;
    background: rgba(20, 20, 20, .95);
    font-size: 12px;
    min-width: 200px;
    color: #FFF;
    border-radius: 4px;
    padding: 4px 12px;
    margin-top: calc(1.42857em + 6px);
}

Timothy Foster - @tfAuroratide
Auroratide.com - Go here if you're nerdy like me

Last edited on 13 Oct 2014 20:23 by Timothy Foster Show more

Reply Options

Unfold Re: Ability to use default Bootstrap Javascript "Components" by

Timothy Foster, 13 Oct 2014 20:21