Demo entry 5882413

code

   

Submitted by anonymous on Aug 28, 2016 at 02:40
Language: HTML. Code size: 80.5 kB.

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Bell Responsive Framework</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="/favicon.ico">
    <!-- Bootstrap core CSS -->
    <link href="../../core/css/bootstrap.min.css" rel="stylesheet">
    <link href="../../core/css/allBrowsers_framework.css" rel="stylesheet">
    <link href="../../core/css/bell.css" rel="stylesheet">
    <link href="../../core/css/widgets/jquery.scrollbar.css" rel="stylesheet">
    <link href="radios.css" rel="stylesheet" type="text/css" />
    <!-- Documentation extras -->
    <link href="../../docs/assets/css/src/pygments-manni.css" rel="stylesheet">
    <link href="../../docs/assets/css/src/anchor.css" rel="stylesheet">
    <link href="../../docs/assets/css/src/docs.css" rel="stylesheet">
    <link href="../../docs/assets/css/src/example.css" rel="stylesheet">
    <link href="../../docs/assets/css/src/overrides.css" rel="stylesheet">
</head>

<body>
    <header class="navbar navbar-static-top bs-docs-nav" id="top" role="banner">
        <div class="container">
            <div class="navbar-header">
                <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
                <a href="index.html" class="navbar-brand">BRF</a>
            </div>
            <nav class="collapse navbar-collapse bs-navbar-collapse">
                <ul id="main-nav" class="nav navbar-nav">
                    <li>
                        <a href="index.html">Introduction</a>
                    </li>
                    <li>
                        <a href="grid.html">Grid</a>
                    </li>
                    <li>
                        <a href="icons.html">Icons</a>
                    </li>
                    <li>
                        <a href="components.html">Components</a>
                    </li>
                    <li class="active">
                        <a href="widgets.html">Widgets</a>
                    </li>
                    <!--<li><a href="cheatsheet.html">Cheat Sheet</a></li>-->
                    <li>
                        <a href="responsive-tools.html">Tools</a>
                    </li>
                    <li>
                        <a href="terms-tools.html">Terminology</a>
                    </li>
                </ul>
                <ul class="nav navbar-nav navbar-right"></ul>
            </nav>
        </div>
    </header>
    <div class="bs-docs-header" id="content" tabindex="-1">
        <div class="container">
            <img src="../../docs/assets/img/bell-virgin.png" height="45" />
            <div class="spacer20 clearfix"></div>
            <span>Bell Interactive widgets</span>
        </div>
    </div>
    <div class="bs-docs-container container">
        <div>
            <!-- main content -->
            <div class="col-md-9 noMargin" role="main">
                <div>
                    <div class="bs-docs-section">
                        <!---radio button ends-->
                        <h1 id="bell-buttons" class="page-header">Radio Buttons</h1>
                        <h2 id="bell-Radio-pos">Custom radio buttons</h2>
                        <div class="bs-example">
                            <!--Radio button -->

                            <div class="floatL">
                                <label class="graphical_ctrl ctrl_radioBtn txtSize15">
                                    First radio
                                    <input type="radio" name="radio" checked="checked">
                                    <span class="ctrl_element"></span>
                                </label>
                            </div>
                            <div class="vSpacer20 floatL"> &nbsp; </div>
                            <!--Radio button -->
                         
                            <div class="floatL">
                                <label class="graphical_ctrl ctrl_radioBtn txtSize15">
                                    Second radio
                                    <input type="radio" name="radio">
                                    <span class="ctrl_element"></span>
                                </label>
                            </div>
                            <div class="Spacer20  clear"> &nbsp; </div>
                           <!--Radio button disabled-->

                            <div class="floatL">
                                <label class="graphical_ctrl ctrl_radioBtn txtSize15">
                                    Disabled
                                    <input type="radio" name="radio2" disabled="disabled">
                                    <span class="ctrl_element"></span>
                                </label>
                            </div>
                            <div class="vSpacer20 floatL"> &nbsp; </div>
                       <!--Radio button checked and disabled-->

                            <div class="floatL">
                                <label class="graphical_ctrl ctrl_radioBtn txtSize15">
                                    Disabled &amp; checked
                                    <input type="radio" name="radio2" disabled="disabled" checked="checked">
                                    <span class="ctrl_element"></span>
                                </label>
                            </div>
                            <br />
                            <br />
                            <div class="clear">
                        </div>
                        <div class="highlight ">
                            <pre>
<code class="language-html" data-lang="html"><span class="na"><span class="c">&lt;!--Custom Radio button--&gt;</span>
                            <br /> &lt;div class="floatL"&gt;<br /> &lt;label class="graphical_ctrl ctrl_radioBtn txtSize15"&gt;<br /> First radio<br /> &lt;input type="radio" name="radio" checked="checked"&gt;<br /> &lt;span class="ctrl_element"&gt;&lt;/span&gt;<br /> &lt;/label&gt;<br /> &lt;/div&gt;<br /> <br /> &lt;div class="vSpacer20 floatL"&gt; &amp;nbsp; &lt;/div&gt;<br /> <span class="na"><span class="c">&lt;!--Custom Radio button--&gt;</span></span><br /> &lt;div class="floatL"&gt;<br /> &lt;label class="graphical_ctrl ctrl_radioBtn txtSize15"&gt;<br /> Second radio<br /> &lt;input type="radio" name="radio"&gt;<br /> &lt;span class="ctrl_element"&gt;&lt;/span&gt;<br /> &lt;/label&gt;<br /> &lt;/div&gt;<br /> &lt;div class="vSpacer20 floatL"&gt; &amp;nbsp; &lt;/div&gt;<br /><span class="na"><span class="c">&lt;!--Custom Radio button disabled--&gt;</span></span><br /> &lt;div class="floatL"&gt;<br /> &lt;label class="graphical_ctrl ctrl_radioBtn txtSize15"&gt;<br /> Disabled<br /> &lt;input type="radio" name="radio2" disabled="disabled"&gt;<br /> &lt;span class="ctrl_element"&gt;&lt;/span&gt;<br /> &lt;/label&gt;<br /> &lt;/div&gt;<br /> &lt;div class="vSpacer20 floatL"&gt; &amp;nbsp; &lt;/div&gt;<br /> <span class="na"><span class="c">&lt;!--Custom Radio button disabled & checked--&gt;</span></span><br /> &lt;div class="floatL"&gt;<br /> &lt;label class="graphical_ctrl ctrl_radioBtn txtSize15"&gt;<br /> Disabled &amp;amp; checked<br /> &lt;input type="radio" name="radio2" disabled="disabled" checked="checked"&gt;<br /> &lt;span class="ctrl_element"&gt;&lt;/span&gt;<br /> &lt;/label&gt;<br /> &lt;/div&gt;
        </span>
</code>
                            </pre>
                        </div>
                        <!---radio button ends-->


                        <!---radio button ends-->
                      <h3>Radio button styles</h3>  
                        <p>
                            Radios, by default, are smaller in desktop than in mobile. By applying the <code>brf-radios_lg</code>, the default behaviour is overrided and the radios remain large. You can see the comparison below as you resize the window.
                        </p>

                        <div class="bs-example">
                            <!--Radio small-->

                            <div class="floatL">
                                <label class="graphical_ctrl ctrl_radioBtn txtSize15">
                                    Option 1
                                    <input type="radio" name="radio_style" checked="checked">
                                    <span class="ctrl_element"></span>
                                </label>
                            </div>
                            <div class="vSpacer20 floatL"> &nbsp; </div>
                           

                            <div class="floatL">
                                <label class="graphical_ctrl ctrl_radioBtn txtSize15">
                                    Option 2
                                    <input type="radio" name="radio_style">
                                    <span class="ctrl_element"></span>
                                </label>
                            </div>
                            <div class="spacer20 clear"> &nbsp; </div>

                            <!--Radio large-->

                            <div class="floatL brf-radios_lg">
                                <label class="graphical_ctrl ctrl_radioBtn txtSize15">
                                    Option 1
                                    <input type="radio" name="Option_large" checked="checked">
                                    <span class="ctrl_element"></span>
                                </label>
                            </div>
                            <div class="vSpacer20 floatL"> &nbsp; </div>
                           

                            <div class="floatL brf-radios_lg">
                                <label class="graphical_ctrl ctrl_radioBtn txtSize15">
                                    Option 2
                                    <input type="radio" name="Option_large">
                                    <span class="ctrl_element"></span>
                                </label>
                            </div>
                 

                          
                            <br />
                            <br />
                            <div class="clear"></div>
                        </div>
                        <div class="highlight ">
                            <pre>
<code class="language-html" data-lang="html"><span class="na"><span class="c">&lt;!--small--&gt;</span>
&lt;div class="floatL"&gt;<br /> &lt;label class="graphical_ctrl ctrl_radioBtn txtSize15"&gt;<br /> Option 1<br /> &lt;input type="radio" name="radio_style" checked="checked"&gt;<br /> &lt;span class="ctrl_element"&gt;&lt;/span&gt;<br /> &lt;/label&gt;<br /> &lt;/div&gt;<br /> &lt;div class="vSpacer20 floatL"&gt; &amp;nbsp; &lt;/div&gt;

&lt;div class="floatL"&gt;<br /> &lt;label class="graphical_ctrl ctrl_radioBtn txtSize15"&gt;<br /> Option 2<br /> &lt;input type="radio" name="radio_style"&gt;<br /> &lt;span class="ctrl_element"&gt;&lt;/span&gt;<br /> &lt;/label&gt;<br /> &lt;/div&gt;<br /> &lt;div class="spacer20 clear"&gt; &amp;nbsp; &lt;/div&gt;

<span class="c">&lt;!--large--&gt;</span>

&lt;div class="floatL brf-radios_lg"&gt;<br /> &lt;label class="graphical_ctrl ctrl_radioBtn txtSize15"&gt;<br /> Option 1<br /> &lt;input type="radio" name="Option_large" checked="checked"&gt;<br /> &lt;span class="ctrl_element"&gt;&lt;/span&gt;<br /> &lt;/label&gt;<br /> &lt;/div&gt;<br /> &lt;div class="vSpacer20 floatL"&gt; &amp;nbsp; &lt;/div&gt;

&lt;div class="floatL brf-radios_lg"&gt;<br /> &lt;label class="graphical_ctrl ctrl_radioBtn txtSize15"&gt;<br /> Option 2<br /> &lt;input type="radio" name="Option_large"&gt;<br /> &lt;span class="ctrl_element"&gt;&lt;/span&gt;<br /> &lt;/label&gt;<br /> &lt;/div&gt;
</span>
</code>
                            </pre>
                        </div>
                        <!---radio button ends-->


                            <!---radio button ends-->
                            <h3>Radio button Error state</h3>
                            <p>
                                This is an example of radio buttons in an error state. Simplying adding rsx-error in the parent div should style the widget and its label accordingly.
                            </p>

                            <div class="bs-example">
                                <!--Radio error small-->
                                <div class="brf-error">
                                    <div class="floatL">
                                        <label class="graphical_ctrl  ctrl_radioBtn txtSize15">
                                            Option 1
                                            <input type="radio" name="example_error_lg" checked="checked">
                                            <span class="ctrl_element"></span>
                                        </label>
                                    </div>
                                    <div class="vSpacer20 floatL"> &nbsp; </div>


                                    <div class="floatL">
                                        <label class="graphical_ctrl ctrl_radioBtn txtSize15 ">
                                            Option 2
                                            <input type="radio" name="example_error_lg">
                                            <span class="ctrl_element"></span>
                                        </label>
                                    </div>

                                </div>  
                                <div class="clear spacer20"></div>
                                <!--Radio Error large-->
                                <div class="brf-error brf-radios_lg">
                                    <div class="floatL brf-error_radio_lg">
                                        <label class="graphical_ctrl   ctrl_radioBtn txtSize15">
                                            Option 1
                                            <input type="radio" name="example_error" checked="checked">
                                            <span class="ctrl_element"></span>
                                        </label>
                                    </div>
                                    <div class="vSpacer20 floatL"> &nbsp; </div>


                                    <div class="floatL brf-error_radio_lg">
                                        <label class="graphical_ctrl ctrl_radioBtn txtSize15 ">
                                            Option 2
                                            <input type="radio" name="example_error">
                                            <span class="ctrl_element"></span>
                                        </label>
                                    </div>

                                </div>
                             
                             
                              
                                <div class="clear"></div>
                            </div>
                            <div class="highlight ">
                                <pre>
<code class="language-html" data-lang="html"><span class="na"><span class="c">&lt;!--Radio error small--&gt;</span>

&lt;div class="brf-error"&gt;<br /> &lt;div class="floatL"&gt;<br /> &lt;label class="graphical_ctrl ctrl_radioBtn txtSize15"&gt;<br /> Option 1<br /> &lt;input type="radio" name="example_error_lg" checked="checked"&gt;<br /> &lt;span class="ctrl_element"&gt;&lt;/span&gt;<br /> &lt;/label&gt;<br /> &lt;/div&gt;<br /> &lt;div class="vSpacer20 floatL"&gt; &amp;nbsp; &lt;/div&gt;<br /> &lt;div class="floatL"&gt;<br /> &lt;label class="graphical_ctrl ctrl_radioBtn txtSize15 "&gt;<br /> Option 2<br /> &lt;input type="radio" name="example_error_lg"&gt;<br /> &lt;span class="ctrl_element"&gt;&lt;/span&gt;<br /> &lt;/label&gt;<br /> &lt;/div&gt;&lt;/div&gt;

<span class="c">&lt;!--Radio error large--&gt;</span>

&lt;div class="brf-error brf-radios_lg"&gt;<br /> &lt;div class="floatL brf-error_radio_lg"&gt;<br /> &lt;label class="graphical_ctrl ctrl_radioBtn txtSize15"&gt;<br /> Option 1<br /> &lt;input type="radio" name="example_error" checked="checked"&gt;<br /> &lt;span class="ctrl_element"&gt;&lt;/span&gt;<br /> &lt;/label&gt;<br /> &lt;/div&gt;<br /> &lt;div class="vSpacer20 floatL"&gt; &amp;nbsp; &lt;/div&gt;<br /> &lt;div class="floatL brf-error_radio_lg"&gt;<br /> &lt;label class="graphical_ctrl ctrl_radioBtn txtSize15 "&gt;<br /> Option 2<br /> &lt;input type="radio" name="example_error"&gt;<br /> &lt;span class="ctrl_element"&gt;&lt;/span&gt;<br /> &lt;/label&gt;<br /> &lt;/div&gt;&lt;/div&gt;

</span>
</code>
                            </pre>
                            </div>


                        <h1 id="bell-buttons" class="page-header">Bell tooltips</h1>
                        <h2 id="bell-tooltip-pos">Tooltip positioning</h2>
                        <div class="bs-example">
                            <!--Tootltip right side-->
                            <div class="floatL">
                                <span class="inlineBlock txtSize15">Tooltip Right</span> <span class="icon i-icon txtGrey txtSize18 hidden-tooltip-target-xs pointer" data-toggle="tooltip" data-placement="auto right" data-container="body" data-trigger="hover focus" title="Tooltip is positioned on the right side of the icon."></span> <span class="icon i-icon txtGrey txtSize18 alignIconWithText hidden-tooltip-target-lg pointer"> </span>
                            </div>
                            <div class="vSpacer20 floatL"> &nbsp; </div>
                            <!--Tootltip left side-->
                            <div class="floatL">
                                <span class="inlineBlock txtSize15">Tooltip Left</span> <span class="icon i-icon txtGrey txtSize18 hidden-tooltip-target-xs pointer" data-toggle="tooltip" data-placement="auto left" data-container="body" data-trigger="hover focus" title="Tooltip is positioned on the left side of the icon."></span> <span class="icon i-icon txtGrey txtSize18 alignIconWithText hidden-tooltip-target-lg pointer"> </span>
                            </div>
                            <div class="vSpacer20 floatL"> &nbsp; </div>
                            <!--Tootltip top side-->
                            <div class="floatL">
                                <span class="inlineBlock txtSize15">Tooltip top</span> <span class="icon i-icon txtGrey txtSize18 hidden-tooltip-target-xs pointer" data-toggle="tooltip" data-placement="auto top" data-container="body" data-trigger="hover focus" title="Tooltip is positioned on the top of the icon."></span> <span class="icon i-icon txtGrey txtSize18 alignIconWithText hidden-tooltip-target-lg pointer"> </span>
                            </div>
                            <div class="vSpacer20 floatL"> &nbsp; </div>
                            <!--Tootltip bottom side-->
                            <div class="floatL">
                                <span class="inlineBlock txtSize15">Tooltip bottom</span> <span class="icon i-icon txtGrey txtSize18 hidden-tooltip-target-xs pointer" data-toggle="tooltip" data-placement="bottom" data-container="body" data-trigger="hover focus" title="Tooltip is positioned on the bottom of the icon."></span> <span class="icon i-icon txtGrey txtSize18 alignIconWithText hidden-tooltip-target-lg pointer"> </span>
                            </div>
                            <br />
                            <br />
                        </div>
                        <div class="highlight">
                            <pre>
<code class="language-html" data-lang="html"><span class="na"><span class="c">&lt;!--Tooltip on right--&gt;</span>
&lt;div class="floatL"&gt;
   &lt;span class="inlineBlock txtSize15"&gt;Tooltip right&lt;/span&gt;
       &lt;span class="icon i-icon txtGrey txtSize18 hidden-tooltip-target-xs pointer"
       data-toggle="tooltip"
       data-placement="auto right"
       data-container="body"
       data-trigger="hover focus"
      title="Tooltip is positioned on the right side of the icon."&gt;
   &lt;/span&gt;
&lt;span class="icon i-icon txtGrey txtSize18 alignIconWithText hidden-tooltip-target-lg pointer"&gt;
&lt;/span&gt;
&lt;/div&gt;
</span><span class="na">
<span class="c">&lt;!--Tooltip on left--&gt;</span>
&lt;div class="floatL"&gt;
   &lt;span class="inlineBlock txtSize15"&gt;Tooltip Left&lt;/span&gt;
       &lt;span class="icon i-icon txtGrey txtSize18 hidden-tooltip-target-xs pointer"
       data-toggle="tooltip"
       data-placement="auto left"
       data-container="body"
       data-trigger="hover focus"
      title="Tooltip is positioned on the left side of the icon."&gt;
   &lt;/span&gt;
&lt;span class="icon i-icon txtGrey txtSize18 alignIconWithText hidden-tooltip-target-lg pointer"&gt;
&lt;/span&gt;
&lt;/div&gt;
</span><span class="na">
<span class="c">&lt;!--Tooltip on top--&gt;</span>
&lt;div class="floatL"&gt;
   &lt;span class="inlineBlock txtSize15"&gt;Tooltip top&lt;/span&gt;
       &lt;span class="icon i-icon txtGrey txtSize18 hidden-tooltip-target-xs pointer"
       data-toggle="tooltip"
       data-placement="auto top"
       data-container="body"
       data-trigger="hover focus"
      title="Tooltip is positioned on the top of the icon."&gt;
   &lt;/span&gt;
&lt;span class="icon i-icon txtGrey txtSize18 alignIconWithText hidden-tooltip-target-lg pointer"&gt;
&lt;/span&gt;
&lt;/div&gt;
</span><span class="na">
<span class="c">&lt;!--Tooltip on bottom--&gt;</span>
&lt;div class="floatL"&gt;
   &lt;span class="inlineBlock txtSize15"&gt;Tooltip bottom&lt;/span&gt;
       &lt;span class="icon i-icon txtGrey txtSize18 hidden-tooltip-target-xs pointer"
       data-toggle="tooltip"
       data-placement="bottom"
       data-container="body"
       data-trigger="hover focus"
      title="Tooltip is positioned on the bottom of the icon."&gt;
   &lt;/span&gt;
&lt;span class="icon i-icon txtGrey txtSize18 alignIconWithText hidden-tooltip-target-lg pointer"&gt;
&lt;/span&gt;
&lt;/div&gt;
</span></code>
                            </pre>
                        </div>
                        <div class="bs-callout bs-callout-warning">
                            <h4>Opt-in functionality</h4>
                            <p>For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning <strong>you must initialize them yourself</strong>.</p>
                            <p>One way to initialize all tooltips on a page would be to select them by their <code>data-toggle</code> attribute:</p>
                            <figure class="highlight">
                                <pre><code data-lang="js" class="language-js"><span class="nx">$</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span><br />&nbsp;&nbsp;<span class="nx">$</span><span class="p">(</span><span class="s1">'[data-toggle="tooltip"]'</span><span class="p">).</span><span class="nx">tooltip</span><span class="p">()</span>
<span class="p">})</span></code></pre>
                            </figure>
                        </div>
                        <h2 id="bell-tooltips-usage">Usage</h2>
                        <p>The tooltip plugin generates content and markup on demand, and by default places tooltips after their trigger element.</p>
                        <p>Trigger the tooltip via JavaScript:</p>
                        <figure class="highlight">
                            <pre><code data-lang="js" class="language-js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#example'</span><span class="p">).</span><span class="nx">tooltip</span><span class="p">(</span><span class="nx">options</span><span class="p">)</span></code></pre>
                        </figure>
                        <!--<h3 id="markup-1">Markup</h3>
                                                <p>The required markup for a tooltip is only a <code>data</code> attribute and <code>title</code> on the HTML element you wish to have a tooltip. The generated markup of a tooltip is rather simple, though it does require a position (by default, set to <code>top</code> by the plugin).</p>

                                                <figure class="highlight">
                                                    <pre><code data-lang="html" class="language-html"><span class="c">&lt;!-- HTML to write --&gt;</span>
                        <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">data-toggle=</span><span class="s">"tooltip"</span> <span class="na">title=</span><span class="s">"Some tooltip text!"</span><span class="nt">&gt;</span>Hover over me<span class="nt">&lt;/a&gt;</span>
                        <span class="c">&lt;!-- Generated markup by the plugin --&gt;</span>
                        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tooltip top"</span> <span class="na">role=</span><span class="s">"tooltip"</span><span class="nt">&gt;</span>
                                                    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tooltip-arrow"</span><span class="nt">&gt;&lt;/div&gt;</span>
                                                    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tooltip-inner"</span><span class="nt">&gt;</span>
                            Some tooltip text!
                                                    <span class="nt">&lt;/div&gt;</span>
                                                    <span class="nt">&lt;/div&gt;</span></code></pre>
                                                </figure>-->
                        <h3 id="bell-tooltips-options">Options</h3>
                        <div class="table-responsive">
                            <table class="table table-bordered table-striped js-options-table">
                                <thead>
                                    <tr>
                                        <th>Name</th>
                                        <th>Type</th>
                                        <th style="width:200px">Default</th>
                                        <th>Description</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>animation</td>
                                        <td>boolean</td>
                                        <td>true</td>
                                        <td>Apply a CSS fade transition to the tooltip</td>
                                    </tr>
                                    <tr>
                                        <td>container</td>
                                        <td>string | false</td>
                                        <td>false</td>
                                        <td>
                                            <p>Appends the tooltip to a specific element. Example: <code>container: 'body'</code>. This option is particularly useful in that it allows you to position the tooltip in the flow of the document near the triggering element -&nbsp;which will prevent the tooltip from floating away from the triggering element during a window resize.</p>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>delay</td>
                                        <td>number | object</td>
                                        <td>0</td>
                                        <td>
                                            <p>Delay showing and hiding the tooltip (ms) - does not apply to manual trigger type</p>
                                            <p>If a number is supplied, delay is applied to both hide/show</p>
                                            <p>
                                                Object structure is: <code>delay: { "show": 500, "hide": 100 }</code>
                                            </p>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>html</td>
                                        <td>boolean</td>
                                        <td>false</td>
                                        <td>Insert HTML into the tooltip. If false, jQuery's <code>text</code> method will be used to insert content into the DOM. Use text if you're worried about XSS attacks.</td>
                                    </tr>
                                    <tr>
                                        <td>placement</td>
                                        <td>string | function</td>
                                        <td>'top'</td>
                                        <td>
                                            <p>
                                                How to position the tooltip - top | bottom | left | right | auto.
                                                <br> When "auto" is specified, it will dynamically reorient the tooltip. For example, if placement is "auto left", the tooltip will display to the left when possible, otherwise it will display right.
                                            </p>
                                            <p>When a function is used to determine the placement, it is called with the tooltip DOM node as its first argument and the triggering element DOM node as its second. The <code>this</code> context is set to the tooltip instance.</p>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>selector</td>
                                        <td>string</td>
                                        <td>false</td>
                                        <td>If a selector is provided, tooltip objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have tooltips added. See <a href="https://github.com/twbs/bootstrap/issues/4215">this</a> and <a href="http://jsbin.com/zopod/1/edit">an informative example</a>.</td>
                                    </tr>
                                    <tr>
                                        <td>template</td>
                                        <td>string</td>
                                        <td>
                                            <code>'&lt;div class="tooltip" role="tooltip"&gt;&lt;div class="tooltip-arrow"&gt;&lt;/div&gt;&lt;div class="tooltip-inner"&gt;&lt;/div&gt;&lt;/div&gt;'</code>
                                        </td>
                                        <td>
                                            <p>Base HTML to use when creating the tooltip.</p>
                                            <p>The tooltip's <code>title</code> will be injected into the <code>.tooltip-inner</code>.</p>
                                            <p><code>.tooltip-arrow</code> will become the tooltip's arrow.</p>
                                            <p>The outermost wrapper element should have the <code>.tooltip</code> class.</p>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>title</td>
                                        <td>string | function</td>
                                        <td>''</td>
                                        <td>
                                            <p>Default title value if <code>title</code> attribute isn't present.</p>
                                            <p>If a function is given, it will be called with its <code>this</code> reference set to the element that the tooltip is attached to.</p>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>trigger</td>
                                        <td>string</td>
                                        <td>'hover focus'</td>
                                        <td>How tooltip is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space. <code>manual</code> cannot be combined with any other trigger.</td>
                                    </tr>
                                    <tr>
                                        <td>viewport</td>
                                        <td>string | object | function</td>
                                        <td>{ selector: 'body', padding: 0 }</td>
                                        <td>
                                            <p>
                                                Keeps the tooltip within the bounds of this element. Example: <code>viewport: '#viewport'</code> or <code>{ "selector": "#viewport", "padding": 0 }</code>
                                            </p>
                                            <p>If a function is given, it is called with the triggering element DOM node as its only argument. The <code>this</code> context is set to the tooltip instance.</p>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div id="callout-tooltip-data" class="bs-callout bs-callout-info">
                            <h4>Data attributes for individual tooltips</h4>
                            <p>Options for individual tooltips can alternatively be specified through the use of data attributes, as explained above.</p>
                        </div>
                        <h3 id="bell-tooltips-methods">Methods</h3>
                        <h4 id="tooltipoptions"><code>$().tooltip(options)</code></h4>
                        <p>Attaches a tooltip handler to an element collection.</p>
                        <h4 id="tooltipshow"> <a class="anchorjs-link " data-anchorjs-icon="" aria-label="Anchor link for: tooltipshow" href="#tooltipshow" style="font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; position: absolute; margin-left: -1em; padding-right: 0.5em;"></a> <code>.tooltip('show')</code> </h4>
                        <p> Reveals an element's tooltip. <strong>Returns to the caller before the tooltip has actually been shown</strong> (i.e. before the <code>shown.bs.tooltip</code> event occurs). This is considered a "manual" triggering of the tooltip. Tooltips with zero-length titles are never displayed. </p>
                        <div class="zero-clipboard"> <span class="btn-clipboard">Copy</span> </div>
                        <figure class="highlight">
                            <pre>
<code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#element'</span><span class="p">).</span><span class="nx">tooltip</span><span class="p">(</span><span class="s1">'show'</span><span class="p">)</span></code>
</pre>
                        </figure>
                        <h4 id="tooltiphide"> <a class="anchorjs-link " data-anchorjs-icon="" aria-label="Anchor link for: tooltiphide" href="#tooltiphide" style="font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; position: absolute; margin-left: -1em; padding-right: 0.5em;"></a> <code>.tooltip('hide')</code> </h4>
                        <p> Hides an element's tooltip. <strong>Returns to the caller before the tooltip has actually been hidden</strong> (i.e. before the <code>hidden.bs.tooltip</code> event occurs). This is considered a "manual" triggering of the tooltip. </p>
                        <figure class="highlight">
                            <pre><code data-lang="js" class="language-js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#element'</span><span class="p">).</span><span class="nx">tooltip</span><span class="p">(</span><span class="s1">'hide'</span><span class="p">)</span></code></pre>
                        </figure>
                        <h4 id="tooltiptoggle"><code>.tooltip('toggle')</code></h4>
                        <p>Toggles an element's tooltip. <strong>Returns to the caller before the tooltip has actually been shown or hidden</strong> (i.e. before the <code>shown.bs.tooltip</code> or <code>hidden.bs.tooltip</code> event occurs). This is considered a "manual" triggering of the tooltip.</p>
                        <figure class="highlight">
                            <pre><code data-lang="js" class="language-js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#element'</span><span class="p">).</span><span class="nx">tooltip</span><span class="p">(</span><span class="s1">'toggle'</span><span class="p">)</span></code></pre>
                        </figure>
                        <h4 id="tooltipdestroy"><a data-anchorjs-icon="" aria-label="Anchor link for: tooltipdestroy" href="#tooltipdestroy" class="anchorjs-link " style="font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; position: absolute; margin-left: -1em; padding-right: 0.5em;"></a><code>.tooltip('destroy')</code></h4>
                        <p>Hides and destroys an element's tooltip. Tooltips that use delegation (which are created using <a href="#bell-tooltips-options">the <code>selector</code> option</a>) cannot be individually destroyed on descendant trigger elements.</p>
                        <figure class="highlight">
                            <pre><code data-lang="js" class="language-js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#element'</span><span class="p">).</span><span class="nx">tooltip</span><span class="p">(</span><span class="s1">'destroy'</span><span class="p">)</span></code></pre>
                        </figure>
                        <h3 id="bell-tooltips-events">Events</h3>
                        <div class="table-responsive">
                            <table class="table table-bordered table-striped bs-events-table">
                                <thead>
                                    <tr>
                                        <th>Event Type</th>
                                        <th>Description</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>show.bs.tooltip</td>
                                        <td>This event fires immediately when the <code>show</code> instance method is called.</td>
                                    </tr>
                                    <tr>
                                        <td>shown.bs.tooltip</td>
                                        <td>This event is fired when the tooltip has been made visible to the user (will wait for CSS transitions to complete).</td>
                                    </tr>
                                    <tr>
                                        <td>hide.bs.tooltip</td>
                                        <td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>
                                    </tr>
                                    <tr>
                                        <td>hidden.bs.tooltip</td>
                                        <td>This event is fired when the tooltip has finished being hidden from the user (will wait for CSS transitions to complete).</td>
                                    </tr>
                                    <tr>
                                        <td>inserted.bs.tooltip</td>
                                        <td>This event is fired after the <code>show.bs.tooltip</code> event when the tooltip template has been added to the DOM.</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <figure class="highlight">
                            <pre><code data-lang="js" class="language-js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myTooltip'</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">'hidden.bs.tooltip'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
                            <span class="c1">// do something…</span>
<span class="p">})</span></code></pre>
                        </figure>
                        <h1 class="page-header" id="bell-modals">Bell Modals</h1>
                        <p>Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.</p>
                        <div id="callout-modal-markup-placement" class="bs-callout bs-callout-warning">
                            <h4>Modal markup placement</h4>
                            <p>Always try to place a modal's HTML code in a top-level position in your document to avoid other components affecting the modal's appearance and/or functionality.</p>
                        </div>
                        <p><strong class="text-danger">Due to how HTML5 defines its semantics, the <code>autofocus</code> HTML attribute has no effect in Bootstrap modals.</strong> To achieve the same effect, use some custom JavaScript:</p>
                        <figure class="highlight">
                            <pre><code data-lang="js" class="language-js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myModal'</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">'shown.bs.modal'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span><br />  <span class="nx">$</span><span class="p">(</span><span class="s1">'#myInput'</span><span class="p">).</span><span class="nx">focus</span><span class="p">()</span>
<span class="p">})</span></code></pre>
                        </figure>
                        <h2 id="bell-modals-examples">Examples</h2>
                        <h3 id="bell-modal-static-example">Static example</h3>
                        <p>A rendered modal with header, body, and set of actions in the footer.</p>
                        <div data-example-id="static-modal" class="bs-example bs-example-modal" role="dialog">
                            Modal style 1
                            <div class="clear"></div>
                            <div class="modal-dialog modal-lg bell-modal-lg" style="width:672px">
                                <!-- Modal content-->
                                <div class="modal-content">
                                    <div class="modal-header bgBlue">
                                        <button data-dismiss="modal" class="close" type="button">
                                            <span class="icon icon-x-close txtWhite txtSize15"></span>
                                        </button>
                                        <h2 class="modal-title bellSlimRegular txtWhite">Lorem ipsum...</h2>
                                    </div>
                                    <div class="modal-body scrollbar-inner bgGrayLight4">
                                        <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10">
                                            <div class="spacer10 noTxt clear">&nbsp;</div>
                                            <p>One fine body…</p>
                                        </div>
                                        <div class="spacer0 noTxt clear">&nbsp;</div>
                                    </div>
                                    <div class="modal-footer bgGrayLight4">
                                        <button data-dismiss="modal" class="btn btn-default" type="button">Close</button>
                                        <button class="btn btn-primary" type="button">Save changes</button>
                                    </div>
                                </div>
                            </div>
                            <div class="clear"></div>
                            Modal style 2
                            <div class="clear"></div>
                            <div class="modal-dialog modal-lg bell-modal-lg" style="width:672px">
                                <!-- Modal content-->
                                <div class="modal-content">
                                    <div class="modal-header bgGrayLight2">
                                        <button data-dismiss="modal" class="close" type="button">
                                            <span class="icon icon-close txtBlue txtSize20"></span>
                                        </button>
                                        <h2 class="modal-title bellSlimRegular txtBlack">Lorem ipsum...</h2>
                                    </div>
                                    <div class="modal-body scrollbar-inner bgWhite">
                                        <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10">
                                            <div class="spacer10 noTxt clear">&nbsp;</div>
                                            <p>One fine body…</p>
                                        </div>
                                        <div class="spacer0 noTxt clear">&nbsp;</div>
                                    </div>
                                    <div class="modal-footer bgWhite">
                                        <button data-dismiss="modal" class="btn btn-default" type="button">Close</button>
                                        <button class="btn btn-primary" type="button">Save changes</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <figure class="highlight">
                        Modal style 1
                        <pre><code data-lang="html" class="language-html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal fade"</span> <span class="na">tabindex=</span><span class="s">"-1"</span> <span class="na">role=</span><span class="s">"dialog"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-dialog modal-lg bell-modal-lg"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-content"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-header bgBlue"</span><span class="nt">&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"close"</span> <span class="na">data-dismiss=</span><span class="s">"modal"</span> <span class="na">aria-label=</span><span class="s">"Close"</span><span class="nt">&gt;&lt;span</span> 
<span class="na">class=</span><span class="s">"icon icon-x-close txtWhite txtSize15"</span><span class="nt">&gt;</span><span class="ni"></span><span class="nt">&lt;/span&gt;&lt;/button&gt;</span>
<span class="nt">&lt;h2</span> <span class="na">class=</span><span class="s">"modal-title bellSlimRegular txtWhite"</span><span class="nt">&gt;</span>Modal title<span class="nt">&lt;/h2&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-body scrollbar-inner bgGrayLight4"</span><span class="nt">&gt;</span>
<span class="nt">&lt;p&gt;</span>One fine body<span class="ni">&amp;hellip;</span><span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-footer bgGrayLight4"</span><span class="nt">&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-default"</span> <span class="na">data-dismiss=</span><span class="s">"modal"</span><span class="nt">&gt;</span>Close<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">&gt;</span>Save changes<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span><span class="c">&lt;!-- /.modal-content --&gt;</span>
<span class="nt">&lt;/div&gt;</span><span class="c">&lt;!-- /.modal-dialog --&gt;</span>
<span class="nt">&lt;/div&gt;</span><span class="c">&lt;!-- /.modal --&gt;</span></code></pre>
                        <br /> Modal style 2
                        <pre><code data-lang="html" class="language-html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal fade"</span> <span class="na">tabindex=</span><span class="s">"-1"</span> <span class="na">role=</span><span class="s">"dialog"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-dialog modal-lg bell-modal-lg"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-content"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-header bgGrayLight2"</span><span class="nt">&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"close"</span> <span class="na">data-dismiss=</span><span class="s">"modal"</span> <span class="na">aria-label=</span><span class="s">"Close"</span><span class="nt">&gt;&lt;span</span> 
<span class="na">class=</span><span class="s">"icon icon-close txtBlue txtSize20"</span><span class="nt">&gt;</span><span class="ni"></span><span class="nt">&lt;/span&gt;&lt;/button&gt;</span>
<span class="nt">&lt;h2</span> <span class="na">class=</span><span class="s">"modal-title bellSlimRegular txtBlack"</span><span class="nt">&gt;</span>Modal title<span class="nt">&lt;/h2&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-body scrollbar-inner bgWhite"</span><span class="nt">&gt;</span>
<span class="nt">&lt;p&gt;</span>One fine body<span class="ni">&amp;hellip;</span><span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-footer bgWhite"</span><span class="nt">&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-default"</span> <span class="na">data-dismiss=</span><span class="s">"modal"</span><span class="nt">&gt;</span>Close<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">&gt;</span>Save changes<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span><span class="c">&lt;!-- /.modal-content --&gt;</span>
<span class="nt">&lt;/div&gt;</span><span class="c">&lt;!-- /.modal-dialog --&gt;</span>
<span class="nt">&lt;/div&gt;</span><span class="c">&lt;!-- /.modal --&gt;</span></code></pre>
                    </figure>
                    <h3 id="bell-modal-live-demo">Live demo</h3>
                    <p>Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.</p>
                    <div class="bs-example bs-example-padded-bottom">
                        <button data-target="#myModal" data-toggle="modal" class="btn btn-primary btn-lg" type="button"> Launch demo modal </button>
                        <button data-target="#myModal2" data-toggle="modal" class="btn btn-primary btn-lg" type="button"> Launch long modal with scrollable body</button>
                    </div>
                    <figure class="highlight">
                        <pre><code data-lang="html" class="language-html"><span class="c">&lt;!-- Button trigger modal --&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary btn-lg"</span> <span class="na">data-toggle=</span><span class="s">"modal"</span> <span class="na">data-target=</span><span class="s">"#myModal"</span><span class="nt">&gt;</span>
  Launch demo modal
<span class="nt">&lt;/button&gt;</span>
</code></pre>
                    </figure>
                    <div id="myModal" class="modal fade" tabindex="-1" role="dialog">
                        <div class="modal-dialog modal-lg bell-modal-lg">
                            <div class="modal-content">
                                <div class="modal-header bgBlue">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span class="icon icon-x-close txtWhite txtSize15"></span>
                                    </button>
                                    <h2 class="modal-title bellSlimRegular txtWhite">Modal title</h2>
                                </div>
                                <div class="modal-body scrollbar-inner bgGrayLight4">
                                    <div class="modal-scroll-area">
                                        <p>One fine body&hellip;</p>
                                    </div>
                                </div>
                                <div class="modal-footer bgGrayLight4">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                    <button type="button" class="btn btn-primary">Save changes</button>
                                </div>
                            </div>
                            <!-- /.modal-content -->
                        </div>
                        <!-- /.modal-dialog -->
                    </div>
                    <!-- /.modal -->
                    <div id="myModal2" class="modal fade" tabindex="-1" role="dialog">
                        <div class="modal-dialog modal-lg bell-modal-lg">
                            <div class="modal-content">
                                <div class="modal-header bgBlue">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span class="icon icon-x-close txtWhite txtSize15"></span> </button>
                                    <h2 class="modal-title bellSlimRegular txtWhite">Modal title</h2>
                                </div>
                                <div class="modal-body scrollbar-inner bgGrayLight4">
                                    <div class="modal-scroll-area">
                                        <p>
                                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lacus ipsum, scelerisque ut ante vel, aliquet dapibus est. Nam purus massa, malesuada suscipit felis ac, eleifend ultricies mauris. Suspendisse fermentum dolor ac purus sagittis fringilla. In ut enim non augue rutrum malesuada a vel nisl. Duis vitae malesuada ligula. Mauris eu congue enim. Aliquam tristique luctus enim, sit amet elementum justo finibus in. Nam et suscipit velit, id facilisis quam. Pellentesque interdum iaculis diam, sed egestas quam hendrerit non. Donec sit amet mi nec lorem rhoncus tempor vel nec tellus. Ut interdum velit quis eros mattis porta. Etiam non nibh tellus. Aliquam sodales pellentesque ipsum, vitae fringilla felis congue vel. Nam et ante vitae enim dignissim fermentum. Donec sed ipsum leo. Sed id quam id turpis consectetur mattis. Fusce vel turpis sit amet ipsum consectetur suscipit. Donec eu luctus mi. Nam tempor interdum dui, eu porttitor nisl tristique in. Maecenas sed nisl ex. Nunc ullamcorper dictum libero cursus efficitur. Sed pharetra egestas ex nec sodales. Nulla facilisi. Proin non felis a sem convallis porta. Nunc faucibus arcu a mattis ullamcorper. Nunc eu lorem libero. Nam porta justo eget odio ultrices, a ultrices magna aliquam.
                                            <br />
                                            <br /> Nulla laoreet euismod dui sed sagittis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur iaculis magna purus, eu rutrum elit dapibus accumsan. Ut id dolor turpis. Suspendisse ac lectus accumsan, lobortis lorem ac, dictum ligula. Praesent consectetur auctor arcu, quis sagittis risus ultrices at. Aliquam erat volutpat. Aliquam lorem lectus, ullamcorper eget magna at, tempus aliquam erat. Nam non odio nec elit interdum vehicula. Mauris at quam lectus. Praesent metus neque, molestie id malesuada ut, molestie at mauris. Nulla non dui mattis justo aliquet aliquet. Nulla scelerisque tincidunt augue eu vehicula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
                                            <br />
                                            <br /> Donec euismod, justo sed bibendum porttitor, magna mi malesuada purus, sed luctus libero metus volutpat dui. Integer id molestie tellus. Vivamus ultrices orci ut interdum cursus. Etiam fringilla imperdiet orci at accumsan. Etiam vestibulum justo sollicitudin ex dapibus, id posuere purus convallis. Fusce pretium ultrices velit, id venenatis lacus. Duis lorem risus, bibendum at condimentum vel, tristique non purus. Etiam lorem magna, elementum at sagittis ut, congue nec dolor. Nunc aliquet dui non risus rhoncus, posuere vestibulum lorem vehicula. Fusce at libero lorem. Aliquam erat volutpat. Donec eget sagittis risus. Donec in porttitor eros. Cras rutrum sapien at elit convallis finibus. Ut at nisl dignissim, ultricies massa sit amet, consequat est. Integer at pretium elit. Nam et quam hendrerit, tincidunt ipsum et, volutpat est. Vivamus sit amet enim et quam semper sagittis id scelerisque lorem. Integer elit ante, luctus id euismod non, sodales sit amet diam. Aliquam erat volutpat. Duis aliquam tellus iaculis ipsum aliquet gravida. Nunc ultrices sodales nulla, vel interdum lorem vulputate eu.
                                            <br />
                                            <br /> Nulla laoreet euismod dui sed sagittis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur iaculis magna purus, eu rutrum elit dapibus accumsan. Ut id dolor turpis. Suspendisse ac lectus accumsan, lobortis lorem ac, dictum ligula. Praesent consectetur auctor arcu, quis sagittis risus ultrices at. Aliquam erat volutpat. Aliquam lorem lectus, ullamcorper eget magna at, tempus aliquam erat. Nam non odio nec elit interdum vehicula. Mauris at quam lectus. Praesent metus neque, molestie id malesuada ut, molestie at mauris. Nulla non dui mattis justo aliquet aliquet. Nulla scelerisque tincidunt augue eu vehicula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
                                            <br />
                                            <br /> Donec euismod, justo sed bibendum porttitor, magna mi malesuada purus, sed luctus libero metus volutpat dui. Integer id molestie tellus. Vivamus ultrices orci ut interdum cursus. Etiam fringilla imperdiet orci at accumsan. Etiam vestibulum justo sollicitudin ex dapibus, id posuere purus convallis. Fusce pretium ultrices velit, id venenatis lacus. Duis lorem risus, bibendum at condimentum vel, tristique non purus. Etiam lorem magna, elementum at sagittis ut, congue nec dolor. Nunc aliquet dui non risus rhoncus, posuere vestibulum lorem vehicula. Fusce at libero lorem. Aliquam erat volutpat. Donec eget sagittis risus. Donec in porttitor eros. Cras rutrum sapien at elit convallis finibus. Ut at nisl dignissim, ultricies massa sit amet, consequat est.
                                            <br />
                                            <br /> Integer at pretium elit. Nam et quam hendrerit, tincidunt ipsum et, volutpat est. Vivamus sit amet enim et quam semper sagittis id scelerisque lorem. Integer elit ante, luctus id euismod non, sodales sit amet diam. Aliquam erat volutpat. Duis aliquam tellus iaculis ipsum aliquet gravida. Nunc ultrices sodales nulla, vel interdum lorem vulputate eu.
                                        </p>
                                    </div>
                                </div>
                                <div class="modal-footer bgGrayLight4">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                    <button type="button" class="btn btn-primary">Save changes</button>
                                </div>
                            </div>
                            <!-- /.modal-content -->
                        </div>
                        <!-- /.modal-dialog -->
                    </div>
                    <!-- /.modal -->
                    <!-- /.modal -->
                    <h2 id="bell-modals-usage">Usage</h2>
                    <p>The modal plugin toggles your hidden content on demand, via data attributes or JavaScript. It also adds <code>.modal-open</code> to the <code>&lt;body&gt;</code> to override default scrolling behavior and generates a <code>.modal-backdrop</code> to provide a click area for dismissing shown modals when clicking outside the modal.</p>
                    <h3 id="via-data-attributes">Via data attributes</h3>
                    <p>Activate a modal without writing JavaScript. Set <code>data-toggle="modal"</code> on a controller element, like a button, along with a <code>data-target="#foo"</code> or <code>href="#foo"</code> to target a specific modal to toggle.</p>
                    <figure class="highlight">
                        <pre><code data-lang="html" class="language-html"><span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"modal"</span> <span class="na">data-target=</span><span class="s">"#myModal"</span><span class="nt">&gt;</span>Launch modal<span class="nt">&lt;/button&gt;</span></code></pre>
                    </figure>
                    <h3 id="via-javascript">Via JavaScript</h3>
                    <p>Call a modal with id <code>myModal</code> with a single line of JavaScript:</p>
                    <figure class="highlight">
                        <pre><code data-lang="js" class="language-js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myModal'</span><span class="p">).</span><span class="nx">modal</span><span class="p">(</span><span class="nx">options</span><span class="p">)</span></code></pre>
                    </figure>
                    <h3 id="bell-modals-options">Options</h3>
                    <p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-backdrop=""</code>.</p>
                    <div class="table-responsive">
                        <table class="table table-bordered table-striped js-options-table">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>type</th>
                                    <th style="width:80px">default</th>
                                    <th>description</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>backdrop</td>
                                    <td>
                                        boolean or the string <code>'static'</code>
                                    </td>
                                    <td>true</td>
                                    <td>Includes a modal-backdrop element. Alternatively, specify <code>static</code> for a backdrop which doesn't close the modal on click.</td>
                                </tr>
                                <tr>
                                    <td>keyboard</td>
                                    <td>boolean</td>
                                    <td>true</td>
                                    <td>Closes the modal when escape key is pressed</td>
                                </tr>
                                <tr>
                                    <td>show</td>
                                    <td>boolean</td>
                                    <td>true</td>
                                    <td>Shows the modal when initialized.</td>
                                </tr>
                                <tr>
                                    <td>remote</td>
                                    <td>path</td>
                                    <td>false</td>
                                    <td>
                                        <p><strong class="text-danger">This option is deprecated since v3.3.0 and has been removed in v4.</strong> We recommend instead using client-side templating or a data binding framework, or calling <a href="http://api.jquery.com/load/">jQuery.load</a> yourself.</p>
                                        <p>If a remote URL is provided, <strong>content will be loaded one time</strong> via jQuery's <code>load</code> method and injected into the <code>.modal-content</code> div. If you're using the data-api, you may alternatively use the <code>href</code> attribute to specify the remote source. An example of this is shown below:</p>
                                        <div class="zero-clipboard">
                                            <span class="btn-clipboard">Copy</span>
                                        </div>
                                        <figure class="highlight">
                                            <pre><code data-lang="html" class="language-html"><span class="nt">&lt;a</span> <span class="na">data-toggle=</span><span class="s">"modal"</span> <span class="na">href=</span><span class="s">"remote.html"</span> <span class="na">data-target=</span><span class="s">"#modal"</span><span class="nt">&gt;</span>Click me<span class="nt">&lt;/a&gt;</span></code></pre>
                                        </figure>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <h3 id="bell-modals-methods"> Methods </h3>
                    <h4 id="modaloptions"> <a class="anchorjs-link " data-anchorjs-icon="" aria-label="Anchor link for: modaloptions" href="#modaloptions" style="font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; position: absolute; margin-left: -1em; padding-right: 0.5em;"></a> <code>.modal(options)</code> </h4>
                    <p> Activates your content as a modal. Accepts an optional options <code>object</code> . </p>
                    <div class="zero-clipboard"> <span class="btn-clipboard">Copy</span> </div>
                    <figure class="highlight">
                        <pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myModal'</span><span class="p">).</span><span class="nx">modal</span><span class="p">({</span><span class="na">  
  keyboard</span><span class="p">:</span><span class="kc">false</span><span class="p"><br />})</span></code></pre>
                    </figure>
                    <h4 id="modaltoggle"> <a class="anchorjs-link " data-anchorjs-icon="" aria-label="Anchor link for: modaltoggle" href="#modaltoggle" style="font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; position: absolute; margin-left: -1em; padding-right: 0.5em;"></a> <code>.modal('toggle')</code> </h4>
                    <p>Manually toggles a modal. <strong>Returns to the caller before the modal has actually been shown or hidden</strong> (i.e. before the <code>shown.bs.modal</code> or <code>hidden.bs.modal</code> event occurs).</p>
                    <figure class="highlight">
                        <pre><code data-lang="js" class="language-js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myModal'</span><span class="p">).</span><span class="nx">modal</span><span class="p">(</span><span class="s1">'toggle'</span><span class="p">)</span></code></pre>
                    </figure>
                    <h4 id="modalshow"> <a class="anchorjs-link " data-anchorjs-icon="" aria-label="Anchor link for: modalshow" href="#modalshow" style="font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; position: absolute; margin-left: -1em; padding-right: 0.5em;"></a> <code>.modal('show')</code> </h4>
                    <p> Manually opens a modal. <strong>Returns to the caller before the modal has actually been shown</strong> (i.e. before the <code>shown.bs.modal</code> event occurs). </p>
                    <figure class="highlight">
                        <pre><code data-lang="js" class="language-js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myModal'</span><span class="p">).</span><span class="nx">modal</span><span class="p">(</span><span class="s1">'show'</span><span class="p">)</span></code></pre>
                    </figure>
                    <h4 id="modalhide"><code>.modal('hide')</code></h4>
                    <p>Manually hides a modal. <strong>Returns to the caller before the modal has actually been hidden</strong> (i.e. before the <code>hidden.bs.modal</code> event occurs).</p>
                    <figure class="highlight">
                        <pre><code data-lang="js" class="language-js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myModal'</span><span class="p">).</span><span class="nx">modal</span><span class="p">(</span><span class="s1">'hide'</span><span class="p">)</span></code></pre>
                    </figure>
                    <h4 id="modalhandleupdate"><code>.modal('handleUpdate')</code></h4>
                    <p>Readjusts the modal's positioning to counter a scrollbar in case one should appear, which would make the modal jump to the left.</p>
                    <p>Only needed when the height of the modal changes while it is open.</p>
                    <figure class="highlight">
                        <pre><code data-lang="js" class="language-js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myModal'</span><span class="p">).</span><span class="nx">modal</span><span class="p">(</span><span class="s1">'handleUpdate'</span><span class="p">)</span></code></pre>
                    </figure>
                    <h3 id="bell-modals-events">Events</h3>
                    <p>Bootstrap's modal class exposes a few events for hooking into modal functionality.</p>
                    <p>All modal events are fired at the modal itself (i.e. at the <code>&lt;div class="modal"&gt;</code>).</p>
                    <div class="table-responsive">
                        <table class="table table-bordered table-striped bs-events-table">
                            <thead>
                                <tr>
                                    <th>Event Type</th>
                                    <th>Description</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>show.bs.modal</td>
                                    <td>This event fires immediately when the <code>show</code> instance method is called. If caused by a click, the clicked element is available as the <code>relatedTarget</code> property of the event.</td>
                                </tr>
                                <tr>
                                    <td>shown.bs.modal</td>
                                    <td>This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the <code>relatedTarget</code> property of the event.</td>
                                </tr>
                                <tr>
                                    <td>hide.bs.modal</td>
                                    <td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>
                                </tr>
                                <tr>
                                    <td>hidden.bs.modal</td>
                                    <td>This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).</td>
                                </tr>
                                <tr>
                                    <td>loaded.bs.modal</td>
                                    <td>This event is fired when the modal has loaded content using the <code>remote</code> option.</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <figure class="highlight">
                        <pre><code data-lang="js" class="language-js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myModal'</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">'hidden.bs.modal'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
                        <span class="c1">// do something...</span>
<span class="p">})</span></code></pre>
                    </figure>
                </div>
            </div>
            <!-- /container -->
        </div>
        <!-- page navigation -->
        <div class="col-md-3" role="complementary">
            <nav class="bs-docs-sidebar hidden-print hidden-xs hidden-sm">
                <ul class="nav bs-docs-sidenav">
                    <li>
                        <a href="widgets.html">Back to main widgets page</a>
                    </li>
                    <li>
                        <a href="#bell-buttons">Bell Tooltips</a>
                        <ul class="nav">
                            <li>
                                <a href="#bell-tooltip-pos">Tooltip positioning</a>
                            </li>
                            <li>
                                <a href="#bell-tooltips-usage">Tooltips usage</a>
                            </li>
                            <li>
                                <a href="#bell-tooltips-options">Options</a>
                            </li>
                            <li>
                                <a href="#bell-tooltips-methods">Methods</a>
                            </li>
                            <li>
                                <a href="#bell-tooltips-events">Events</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="#bell-modals">Bell Modals</a>
                        <ul class="nav">
                            <li>
                                <a href="#bell-modals-examples">Examples</a>
                            </li>
                            <li>
                                <a href="#bell-modal-static-example">Static example</a>
                            </li>
                            <li>
                                <a href="#bell-modal-live-demo">Live demo</a>
                            </li>
                            <li>
                                <a href="#bell-modals-usage">Usage</a>
                            </li>
                            <li>
                                <a href="#bell-modals-options">Options</a>
                            </li>
                            <li>
                                <a href="#bell-modals-methods">Methods</a>
                            </li>
                            <li>
                                <a href="#bell-modals-events">Events</a>
                            </li>
                        </ul>
                    </li>
                </ul>
                <a class="back-to-top" href="#top">Back to top</a>
            </nav>
        </div>
    </div>
    </div>
    <footer class="bs-docs-footer" role="contentinfo">
        <div class="container">
            <p>Written and maintained by the DCX team.</p>
            <p>Documentation is based on Twitter Bootstrap's by <a href="https://twitter.com/mdo" target="_blank">@mdo</a> and <a href="https://twitter.com/fat" target="_blank">@fat</a>.</p>
            <p>Twitter Bootstrap Code licensed under <a href="https://github.com/twbs/bootstrap/blob/master/LICENSE" target="_blank">MIT</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
        </div>
    </footer>
    <!-- BUNDLE END: framework-bottom.min.js -->
    <!-- Bootstrap core JavaScript
        ================================================== -->
    <script src="../../core/js/jquery-2.1.3.min.js"></script>
    <script src="../../docs/assets/js/vendor/holder.js"></script>
    <script src="../../docs/assets/js/vendor/anchor.js"></script>
    <script src="../../docs/assets/js/src/application.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="../../core/js/bootstrap.min.js"></script>
    <script src="../../core/js/bell.js"></script>
    <script src="../../core/js/widgets/jquery.lazyload.min.js"></script>
    <script src="../../core/js/widgets/jquery.scrollbar.js"></script>
    <script>
        $(document).ready(function () {
            //this is the code to make sure all your tooltips are functioning
            $('[data-toggle="tooltip"]').tooltip();
        });
    </script>
</body>

</html>

This snippet took 0.05 seconds to highlight.

Back to the Entry List or Home.

Delete this entry (admin only).