yaffs.net Git - yaffs-website/blob - web/themes/contrib/bootstrap/docs/Theme-Settings.md

   1 <!-- @file Overview of theme settings for Drupal Bootstrap based themes. -->
   2 <!-- @defgroup -->
   3 <!-- @ingroup -->
   4 # Theme Settings
   5
   6 To override a setting, open `./config/install/THEMENAME.settings.yml`
   7 and add the following:
   8
   9 ```yaml
  10 # Settings
  11
  12 settings:
  13   SETTING_NAME: SETTING_VALUE
  14 ```
  15
  16 ---
  17
  18 ### Advanced
  19
  20 <table class="table table-striped table-responsive">
  21   <thead>
  22     <tr>
  23       <th class="col-xs-3">Setting name</th>
  24       <th>Description and default value</th>
  25     </tr>
  26   </thead>
  27   <tbody>
  28   <tr>
  29     <td class="col-xs-3">
  30 include_deprecated
  31     </td>
  32     <td>
  33       <div class="help-block">
  34 Enabling this setting will include any <code>deprecated.php</code> file
  35 found in your theme or base themes.
  36       </div>
  37       <pre class=" language-yaml"><code>
  38 include_deprecated: 0
  39
  40 </code></pre>
  41     </td>
  42   </tr>
  43   <tr>
  44     <td class="col-xs-3">
  45 suppress_deprecated_warnings
  46     </td>
  47     <td>
  48       <div class="help-block">
  49 Enable this setting if you wish to suppress deprecated warning messages.
  50 <strong class='error text-error'>WARNING: Suppressing these messages does
  51 not "fix" the problem and you will inevitably encounter issues
  52 when they are removed in future updates. Only use this setting in extreme
  53 and necessary circumstances.</strong>
  54       </div>
  55       <pre class=" language-yaml"><code>
  56 suppress_deprecated_warnings: 0
  57
  58 </code></pre>
  59     </td>
  60   </tr>
  61   </tbody>
  62 </table>
  63
  64 ---
  65
  66 ### Advanced > CDN (Content Delivery Network)
  67
  68 <table class="table table-striped table-responsive">
  69   <thead>
  70     <tr>
  71       <th class="col-xs-3">Setting name</th>
  72       <th>Description and default value</th>
  73     </tr>
  74   </thead>
  75   <tbody>
  76   <tr>
  77     <td class="col-xs-3">
  78 cdn_provider
  79     </td>
  80     <td>
  81       <div class="help-block">
  82 Choose between jsdelivr or a custom cdn source.
  83       </div>
  84       <pre class=" language-yaml"><code>
  85 cdn_provider: jsdelivr
  86
  87 </code></pre>
  88     </td>
  89   </tr>
  90   <tr>
  91     <td class="col-xs-3">
  92 cdn_custom_css
  93     </td>
  94     <td>
  95       <div class="help-block">
  96 It is best to use <code>https</code> protocols here as it will allow more
  97 flexibility if the need ever arises.
  98       </div>
  99       <pre class=" language-yaml"><code>
 100 cdn_custom_css:
 101 'https://cdn.jsdelivr.net/bootstrap/3.3.7/css/bootstrap.css'
 102
 103 </code></pre>
 104     </td>
 105   </tr>
 106   <tr>
 107     <td class="col-xs-3">
 108 cdn_custom_css_min
 109     </td>
 110     <td>
 111       <div class="help-block">
 112 Additionally, you can provide the minimized version of the file. It will be
 113 used instead if site aggregation is enabled.
 114       </div>
 115       <pre class=" language-yaml"><code>
 116 cdn_custom_css_min:
 117 'https://cdn.jsdelivr.net/bootstrap/3.3.7/css/bootstrap.min.css'
 118
 119 </code></pre>
 120     </td>
 121   </tr>
 122   <tr>
 123     <td class="col-xs-3">
 124 cdn_custom_js
 125     </td>
 126     <td>
 127       <div class="help-block">
 128 It is best to use <code>https</code> protocols here as it will allow more
 129 flexibility if the need ever arises.
 130       </div>
 131       <pre class=" language-yaml"><code>
 132 cdn_custom_js: 'https://cdn.jsdelivr.net/bootstrap/3.3.7/js/bootstrap.js'
 133
 134 </code></pre>
 135     </td>
 136   </tr>
 137   <tr>
 138     <td class="col-xs-3">
 139 cdn_custom_js_min
 140     </td>
 141     <td>
 142       <div class="help-block">
 143 Additionally, you can provide the minimized version of the file. It will be
 144 used instead if site aggregation is enabled.
 145       </div>
 146       <pre class=" language-yaml"><code>
 147 cdn_custom_js_min:
 148 'https://cdn.jsdelivr.net/bootstrap/3.3.7/js/bootstrap.min.js'
 149
 150 </code></pre>
 151     </td>
 152   </tr>
 153   <tr>
 154     <td class="col-xs-3">
 155 cdn_jsdelivr_version
 156     </td>
 157     <td>
 158       <div class="help-block">
 159 Choose the Bootstrap version from jsdelivr
 160       </div>
 161       <pre class=" language-yaml"><code>
 162 cdn_jsdelivr_version: 3.3.7
 163
 164 </code></pre>
 165     </td>
 166   </tr>
 167   <tr>
 168     <td class="col-xs-3">
 169 cdn_jsdelivr_theme
 170     </td>
 171     <td>
 172       <div class="help-block">
 173 Choose the example Bootstrap Theme provided by Bootstrap or one of the
 174 Bootswatch themes.
 175       </div>
 176       <pre class=" language-yaml"><code>
 177 cdn_jsdelivr_theme: bootstrap
 178
 179 </code></pre>
 180     </td>
 181   </tr>
 182   </tbody>
 183 </table>
 184
 185 ---
 186
 187 ### Components > Breadcrumbs
 188
 189 <table class="table table-striped table-responsive">
 190   <thead>
 191     <tr>
 192       <th class="col-xs-3">Setting name</th>
 193       <th>Description and default value</th>
 194     </tr>
 195   </thead>
 196   <tbody>
 197   <tr>
 198     <td class="col-xs-3">
 199 breadcrumb
 200     </td>
 201     <td>
 202       <div class="help-block">
 203 Show or hide the Breadcrumbs
 204       </div>
 205       <pre class=" language-yaml"><code>
 206 breadcrumb: '1'
 207
 208 </code></pre>
 209     </td>
 210   </tr>
 211   <tr>
 212     <td class="col-xs-3">
 213 breadcrumb_home
 214     </td>
 215     <td>
 216       <div class="help-block">
 217 If your site has a module dedicated to handling breadcrumbs already, ensure
 218 this setting is enabled.
 219       </div>
 220       <pre class=" language-yaml"><code>
 221 breadcrumb_home: 0
 222
 223 </code></pre>
 224     </td>
 225   </tr>
 226   <tr>
 227     <td class="col-xs-3">
 228 breadcrumb_title
 229     </td>
 230     <td>
 231       <div class="help-block">
 232 If your site has a module dedicated to handling breadcrumbs already, ensure
 233 this setting is disabled.
 234       </div>
 235       <pre class=" language-yaml"><code>
 236 breadcrumb_title: 1
 237
 238 </code></pre>
 239     </td>
 240   </tr>
 241   </tbody>
 242 </table>
 243
 244 ---
 245
 246 ### Components > Navbar
 247
 248 <table class="table table-striped table-responsive">
 249   <thead>
 250     <tr>
 251       <th class="col-xs-3">Setting name</th>
 252       <th>Description and default value</th>
 253     </tr>
 254   </thead>
 255   <tbody>
 256   <tr>
 257     <td class="col-xs-3">
 258 navbar_inverse
 259     </td>
 260     <td>
 261       <div class="help-block">
 262 Select if you want the inverse navbar style.
 263       </div>
 264       <pre class=" language-yaml"><code>
 265 navbar_inverse: 0
 266
 267 </code></pre>
 268     </td>
 269   </tr>
 270   <tr>
 271     <td class="col-xs-3">
 272 navbar_position
 273     </td>
 274     <td>
 275       <div class="help-block">
 276 Determines where the navbar is positioned on the page.
 277       </div>
 278       <pre class=" language-yaml"><code>
 279 navbar_position: ''
 280
 281 </code></pre>
 282     </td>
 283   </tr>
 284   </tbody>
 285 </table>
 286
 287 ---
 288
 289 ### Components > Region Wells
 290
 291 <table class="table table-striped table-responsive">
 292   <thead>
 293     <tr>
 294       <th class="col-xs-3">Setting name</th>
 295       <th>Description and default value</th>
 296     </tr>
 297   </thead>
 298   <tbody>
 299   <tr>
 300     <td class="col-xs-3">
 301 region_wells
 302     </td>
 303     <td>
 304       <div class="help-block">
 305 Enable the <code>.well</code>, <code>.well-sm</code> or
 306 <code>.well-lg</code> classes for specified regions.
 307       </div>
 308       <pre class=" language-yaml"><code>
 309 region_wells:
 310   navigation: ''
 311   navigation_collapsible: ''
 312   header: ''
 313   highlighted: ''
 314   help: ''
 315   content: ''
 316   sidebar_first: ''
 317   sidebar_second: well
 318   footer: ''
 319
 320 </code></pre>
 321     </td>
 322   </tr>
 323   </tbody>
 324 </table>
 325
 326 ---
 327
 328 ### General > Buttons
 329
 330 <table class="table table-striped table-responsive">
 331   <thead>
 332     <tr>
 333       <th class="col-xs-3">Setting name</th>
 334       <th>Description and default value</th>
 335     </tr>
 336   </thead>
 337   <tbody>
 338   <tr>
 339     <td class="col-xs-3">
 340 button_colorize
 341     </td>
 342     <td>
 343       <div class="help-block">
 344 Adds classes to buttons based on their text value.
 345       </div>
 346       <pre class=" language-yaml"><code>
 347 button_colorize: 1
 348
 349 </code></pre>
 350     </td>
 351   </tr>
 352   <tr>
 353     <td class="col-xs-3">
 354 button_iconize
 355     </td>
 356     <td>
 357       <div class="help-block">
 358 Adds icons to buttons based on the text value
 359       </div>
 360       <pre class=" language-yaml"><code>
 361 button_iconize: 1
 362
 363 </code></pre>
 364     </td>
 365   </tr>
 366   <tr>
 367     <td class="col-xs-3">
 368 button_size
 369     </td>
 370     <td>
 371       <div class="help-block">
 372 Defines the Bootstrap Buttons specific size
 373       </div>
 374       <pre class=" language-yaml"><code>
 375 button_size: ''
 376
 377 </code></pre>
 378     </td>
 379   </tr>
 380   </tbody>
 381 </table>
 382
 383 ---
 384
 385 ### General > Container
 386
 387 <table class="table table-striped table-responsive">
 388   <thead>
 389     <tr>
 390       <th class="col-xs-3">Setting name</th>
 391       <th>Description and default value</th>
 392     </tr>
 393   </thead>
 394   <tbody>
 395   <tr>
 396     <td class="col-xs-3">
 397 fluid_container
 398     </td>
 399     <td>
 400       <div class="help-block">
 401 Uses the <code>.container-fluid</code> class instead of
 402 <code>.container</code>.
 403       </div>
 404       <pre class=" language-yaml"><code>
 405 fluid_container: 0
 406
 407 </code></pre>
 408     </td>
 409   </tr>
 410   </tbody>
 411 </table>
 412
 413 ---
 414
 415 ### General > Forms
 416
 417 <table class="table table-striped table-responsive">
 418   <thead>
 419     <tr>
 420       <th class="col-xs-3">Setting name</th>
 421       <th>Description and default value</th>
 422     </tr>
 423   </thead>
 424   <tbody>
 425   <tr>
 426     <td class="col-xs-3">
 427 forms_has_error_value_toggle
 428     </td>
 429     <td>
 430       <div class="help-block">
 431 If an element has a <code>.has-error</code> class attached to it, enabling
 432 this will automatically remove that class when a value is entered.
 433       </div>
 434       <pre class=" language-yaml"><code>
 435 forms_has_error_value_toggle: 1
 436
 437 </code></pre>
 438     </td>
 439   </tr>
 440   <tr>
 441     <td class="col-xs-3">
 442 forms_required_has_error
 443     </td>
 444     <td>
 445       <div class="help-block">
 446 If an element in a form is required, enabling this will always display the
 447 element with a <code>.has-error</code> class. This turns the element red
 448 and helps in usability for determining which form elements are required to
 449 submit the form.
 450       </div>
 451       <pre class=" language-yaml"><code>
 452 forms_required_has_error: 0
 453
 454 </code></pre>
 455     </td>
 456   </tr>
 457   <tr>
 458     <td class="col-xs-3">
 459 forms_smart_descriptions
 460     </td>
 461     <td>
 462       <div class="help-block">
 463 Convert descriptions into tooltips (must be enabled) automatically based on
 464 certain criteria. This helps reduce the, sometimes unnecessary, amount of
 465 noise on a page full of form elements.
 466       </div>
 467       <pre class=" language-yaml"><code>
 468 forms_smart_descriptions: 1
 469
 470 </code></pre>
 471     </td>
 472   </tr>
 473   <tr>
 474     <td class="col-xs-3">
 475 forms_smart_descriptions_allowed_tags
 476     </td>
 477     <td>
 478       <div class="help-block">
 479 Prevents descriptions from becoming tooltips by checking for HTML not in
 480 the list above (i.e. links). Separate by commas. To disable this filtering
 481 criteria, leave an empty value.
 482       </div>
 483       <pre class=" language-yaml"><code>
 484 forms_smart_descriptions_allowed_tags: 'b, code, em, i, kbd, span, strong'
 485
 486 </code></pre>
 487     </td>
 488   </tr>
 489   <tr>
 490     <td class="col-xs-3">
 491 forms_smart_descriptions_limit
 492     </td>
 493     <td>
 494       <div class="help-block">
 495 Prevents descriptions from becoming tooltips by checking the character
 496 length of the description (HTML is not counted towards this limit). To
 497 disable this filtering criteria, leave an empty value.
 498       </div>
 499       <pre class=" language-yaml"><code>
 500 forms_smart_descriptions_limit: '250'
 501
 502 </code></pre>
 503     </td>
 504   </tr>
 505   </tbody>
 506 </table>
 507
 508 ---
 509
 510 ### General > Images
 511
 512 <table class="table table-striped table-responsive">
 513   <thead>
 514     <tr>
 515       <th class="col-xs-3">Setting name</th>
 516       <th>Description and default value</th>
 517     </tr>
 518   </thead>
 519   <tbody>
 520   <tr>
 521     <td class="col-xs-3">
 522 image_responsive
 523     </td>
 524     <td>
 525       <div class="help-block">
 526 Images in Bootstrap 3 can be made responsive-friendly via the addition of
 527 the <code>.img-responsive</code> class. This applies <code>max-width:
 528 100%;</code> and <code>height: auto;</code> to the image so that it scales
 529 nicely to the parent element.
 530       </div>
 531       <pre class=" language-yaml"><code>
 532 image_responsive: 1
 533
 534 </code></pre>
 535     </td>
 536   </tr>
 537   <tr>
 538     <td class="col-xs-3">
 539 image_shape
 540     </td>
 541     <td>
 542       <div class="help-block">
 543 Add classes to an <code>&lt;img&gt;</code> element to easily style images
 544 in any project.
 545       </div>
 546       <pre class=" language-yaml"><code>
 547 image_shape: ''
 548
 549 </code></pre>
 550     </td>
 551   </tr>
 552   </tbody>
 553 </table>
 554
 555 ---
 556
 557 ### General > Tables
 558
 559 <table class="table table-striped table-responsive">
 560   <thead>
 561     <tr>
 562       <th class="col-xs-3">Setting name</th>
 563       <th>Description and default value</th>
 564     </tr>
 565   </thead>
 566   <tbody>
 567   <tr>
 568     <td class="col-xs-3">
 569 table_bordered
 570     </td>
 571     <td>
 572       <div class="help-block">
 573 Add borders on all sides of the table and cells.
 574       </div>
 575       <pre class=" language-yaml"><code>
 576 table_bordered: 0
 577
 578 </code></pre>
 579     </td>
 580   </tr>
 581   <tr>
 582     <td class="col-xs-3">
 583 table_condensed
 584     </td>
 585     <td>
 586       <div class="help-block">
 587 Make tables more compact by cutting cell padding in half.
 588       </div>
 589       <pre class=" language-yaml"><code>
 590 table_condensed: 0
 591
 592 </code></pre>
 593     </td>
 594   </tr>
 595   <tr>
 596     <td class="col-xs-3">
 597 table_hover
 598     </td>
 599     <td>
 600       <div class="help-block">
 601 Enable a hover state on table rows.
 602       </div>
 603       <pre class=" language-yaml"><code>
 604 table_hover: 1
 605
 606 </code></pre>
 607     </td>
 608   </tr>
 609   <tr>
 610     <td class="col-xs-3">
 611 table_striped
 612     </td>
 613     <td>
 614       <div class="help-block">
 615 Add zebra-striping to any table row within the <code>&lt;tbody&gt;</code>.
 616       </div>
 617       <pre class=" language-yaml"><code>
 618 table_striped: 1
 619
 620 </code></pre>
 621     </td>
 622   </tr>
 623   <tr>
 624     <td class="col-xs-3">
 625 table_responsive
 626     </td>
 627     <td>
 628       <div class="help-block">
 629 Wraps tables with <code>.table-responsive</code> to make them horizontally
 630 scroll when viewing them on devices under 768px. When viewing on devices
 631 larger than 768px, you will not see a difference in the presentational
 632 aspect of these tables. The <code>Automatic</code> option will only apply
 633 this setting for front-end facing tables, not the tables in administrative
 634 areas.
 635       </div>
 636       <pre class=" language-yaml"><code>
 637 table_responsive: -1
 638
 639 </code></pre>
 640     </td>
 641   </tr>
 642   </tbody>
 643 </table>
 644
 645 ---
 646
 647 ### JavaScript > Modals
 648
 649 <table class="table table-striped table-responsive">
 650   <thead>
 651     <tr>
 652       <th class="col-xs-3">Setting name</th>
 653       <th>Description and default value</th>
 654     </tr>
 655   </thead>
 656   <tbody>
 657   <tr>
 658     <td class="col-xs-3">
 659 modal_enabled
 660     </td>
 661     <td>
 662       <div class="help-block">
 663 Enabling this will replace core's jQuery UI Dialog implementations with
 664 modals from the Bootstrap Framework.
 665       </div>
 666       <pre class=" language-yaml"><code>
 667 modal_enabled: 1
 668
 669 </code></pre>
 670     </td>
 671   </tr>
 672   <tr>
 673     <td class="col-xs-3">
 674 modal_animation
 675     </td>
 676     <td>
 677       <div class="help-block">
 678 Apply a CSS fade transition to modals.
 679       </div>
 680       <pre class=" language-yaml"><code>
 681 modal_animation: 1
 682
 683 </code></pre>
 684     </td>
 685   </tr>
 686   <tr>
 687     <td class="col-xs-3">
 688 modal_backdrop
 689     </td>
 690     <td>
 691       <div class="help-block">
 692 Includes a modal-backdrop element. Alternatively, specify
 693 <code>static</code> for a backdrop which doesn't close the modal on click.
 694       </div>
 695       <pre class=" language-yaml"><code>
 696 modal_backdrop: 'true'
 697
 698 </code></pre>
 699     </td>
 700   </tr>
 701   <tr>
 702     <td class="col-xs-3">
 703 modal_keyboard
 704     </td>
 705     <td>
 706       <div class="help-block">
 707 Closes the modal when escape key is pressed.
 708       </div>
 709       <pre class=" language-yaml"><code>
 710 modal_keyboard: 1
 711
 712 </code></pre>
 713     </td>
 714   </tr>
 715   <tr>
 716     <td class="col-xs-3">
 717 modal_show
 718     </td>
 719     <td>
 720       <div class="help-block">
 721 Shows the modal when initialized.
 722       </div>
 723       <pre class=" language-yaml"><code>
 724 modal_show: 1
 725
 726 </code></pre>
 727     </td>
 728   </tr>
 729   <tr>
 730     <td class="col-xs-3">
 731 modal_size
 732     </td>
 733     <td>
 734       <div class="help-block">
 735 Defines the modal size between the default, <code>modal-sm</code> and
 736 <code>modal-lg</code>.
 737       </div>
 738       <pre class=" language-yaml"><code>
 739 modal_size: ''
 740
 741 </code></pre>
 742     </td>
 743   </tr>
 744   </tbody>
 745 </table>
 746
 747 ---
 748
 749 ### JavaScript > Popovers
 750
 751 <table class="table table-striped table-responsive">
 752   <thead>
 753     <tr>
 754       <th class="col-xs-3">Setting name</th>
 755       <th>Description and default value</th>
 756     </tr>
 757   </thead>
 758   <tbody>
 759   <tr>
 760     <td class="col-xs-3">
 761 popover_enabled
 762     </td>
 763     <td>
 764       <div class="help-block">
 765 Elements that have the <code>data-toggle=&quot;popover&quot;</code>
 766 attribute set will automatically initialize the popover upon page load.
 767 <strong class='error text-error'>WARNING: This feature can sometimes impact
 768 performance. Disable if pages appear to hang after initial load.</strong>
 769       </div>
 770       <pre class=" language-yaml"><code>
 771 popover_enabled: 1
 772
 773 </code></pre>
 774     </td>
 775   </tr>
 776   <tr>
 777     <td class="col-xs-3">
 778 popover_animation
 779     </td>
 780     <td>
 781       <div class="help-block">
 782 Apply a CSS fade transition to the popover.
 783       </div>
 784       <pre class=" language-yaml"><code>
 785 popover_animation: 1
 786
 787 </code></pre>
 788     </td>
 789   </tr>
 790   <tr>
 791     <td class="col-xs-3">
 792 popover_container
 793     </td>
 794     <td>
 795       <div class="help-block">
 796 Appends the popover to a specific element. Example: <code>body</code>. This
 797 option is particularly useful in that it allows you to position the popover
 798 in the flow of the document near the triggering element - which will
 799 prevent the popover from floating away from the triggering element during a
 800 window resize.
 801       </div>
 802       <pre class=" language-yaml"><code>
 803 popover_container: body
 804
 805 </code></pre>
 806     </td>
 807   </tr>
 808   <tr>
 809     <td class="col-xs-3">
 810 popover_content
 811     </td>
 812     <td>
 813       <div class="help-block">
 814 Default content value if <code>data-content</code> or
 815 <code>data-target</code> attributes are not present.
 816       </div>
 817       <pre class=" language-yaml"><code>
 818 popover_content: ''
 819
 820 </code></pre>
 821     </td>
 822   </tr>
 823   <tr>
 824     <td class="col-xs-3">
 825 popover_delay
 826     </td>
 827     <td>
 828       <div class="help-block">
 829 The amount of time to delay showing and hiding the popover (in
 830 milliseconds). Does not apply to manual trigger type.
 831       </div>
 832       <pre class=" language-yaml"><code>
 833 popover_delay: '0'
 834
 835 </code></pre>
 836     </td>
 837   </tr>
 838   <tr>
 839     <td class="col-xs-3">
 840 popover_html
 841     </td>
 842     <td>
 843       <div class="help-block">
 844 Insert HTML into the popover. If false, jQuery's text method will be used
 845 to insert content into the DOM. Use text if you're worried about XSS
 846 attacks.
 847       </div>
 848       <pre class=" language-yaml"><code>
 849 popover_html: 0
 850
 851 </code></pre>
 852     </td>
 853   </tr>
 854   <tr>
 855     <td class="col-xs-3">
 856 popover_placement
 857     </td>
 858     <td>
 859       <div class="help-block">
 860 Where to position the popover. When <code>auto</code> is specified, it will
 861 dynamically reorient the popover. For example, if placement is <code>auto
 862 left</code>, the popover will display to the left when possible, otherwise
 863 it will display right.
 864       </div>
 865       <pre class=" language-yaml"><code>
 866 popover_placement: right
 867
 868 </code></pre>
 869     </td>
 870   </tr>
 871   <tr>
 872     <td class="col-xs-3">
 873 popover_selector
 874     </td>
 875     <td>
 876       <div class="help-block">
 877 If a selector is provided, tooltip objects will be delegated to the
 878 specified targets. In practice, this is used to enable dynamic HTML content
 879 to have popovers added.
 880       </div>
 881       <pre class=" language-yaml"><code>
 882 popover_selector: ''
 883
 884 </code></pre>
 885     </td>
 886   </tr>
 887   <tr>
 888     <td class="col-xs-3">
 889 popover_title
 890     </td>
 891     <td>
 892       <div class="help-block">
 893 Default title value if <code>title</code> attribute isn't present.
 894       </div>
 895       <pre class=" language-yaml"><code>
 896 popover_title: ''
 897
 898 </code></pre>
 899     </td>
 900   </tr>
 901   <tr>
 902     <td class="col-xs-3">
 903 popover_trigger
 904     </td>
 905     <td>
 906       <div class="help-block">
 907 How a popover is triggered.
 908       </div>
 909       <pre class=" language-yaml"><code>
 910 popover_trigger: click
 911
 912 </code></pre>
 913     </td>
 914   </tr>
 915   <tr>
 916     <td class="col-xs-3">
 917 popover_trigger_autoclose
 918     </td>
 919     <td>
 920       <div class="help-block">
 921 Will automatically close the current popover if a click occurs anywhere
 922 else other than the popover element.
 923       </div>
 924       <pre class=" language-yaml"><code>
 925 popover_trigger_autoclose: 1
 926
 927 </code></pre>
 928     </td>
 929   </tr>
 930   </tbody>
 931 </table>
 932
 933 ---
 934
 935 ### JavaScript > Tooltips
 936
 937 <table class="table table-striped table-responsive">
 938   <thead>
 939     <tr>
 940       <th class="col-xs-3">Setting name</th>
 941       <th>Description and default value</th>
 942     </tr>
 943   </thead>
 944   <tbody>
 945   <tr>
 946     <td class="col-xs-3">
 947 tooltip_enabled
 948     </td>
 949     <td>
 950       <div class="help-block">
 951 Elements that have the <code>data-toggle="tooltip"</code>
 952 attribute set will automatically initialize the tooltip upon page load.
 953 <strong class='error text-error'>WARNING: This feature can sometimes impact
 954 performance. Disable if pages appear to "hang" after initial
 955 load.</strong>
 956       </div>
 957       <pre class=" language-yaml"><code>
 958 tooltip_enabled: 1
 959
 960 </code></pre>
 961     </td>
 962   </tr>
 963   <tr>
 964     <td class="col-xs-3">
 965 tooltip_animation
 966     </td>
 967     <td>
 968       <div class="help-block">
 969 Apply a CSS fade transition to the tooltip.
 970       </div>
 971       <pre class=" language-yaml"><code>
 972 tooltip_animation: 1
 973
 974 </code></pre>
 975     </td>
 976   </tr>
 977   <tr>
 978     <td class="col-xs-3">
 979 tooltip_container
 980     </td>
 981     <td>
 982       <div class="help-block">
 983 Appends the tooltip to a specific element. Example: <code>body</code>.
 984       </div>
 985       <pre class=" language-yaml"><code>
 986 tooltip_container: body
 987
 988 </code></pre>
 989     </td>
 990   </tr>
 991   <tr>
 992     <td class="col-xs-3">
 993 tooltip_delay
 994     </td>
 995     <td>
 996       <div class="help-block">
 997 The amount of time to delay showing and hiding the tooltip (in
 998 milliseconds). Does not apply to manual trigger type.
 999       </div>
1000       <pre class=" language-yaml"><code>
1001 tooltip_delay: '0'
1002
1003 </code></pre>
1004     </td>
1005   </tr>
1006   <tr>
1007     <td class="col-xs-3">
1008 tooltip_html
1009     </td>
1010     <td>
1011       <div class="help-block">
1012 Insert HTML into the tooltip. If false, jQuery's text method will be used
1013 to insert content into the DOM. Use text if you're worried about XSS
1014 attacks.
1015       </div>
1016       <pre class=" language-yaml"><code>
1017 tooltip_html: 0
1018
1019 </code></pre>
1020     </td>
1021   </tr>
1022   <tr>
1023     <td class="col-xs-3">
1024 tooltip_placement
1025     </td>
1026     <td>
1027       <div class="help-block">
1028 Where to position the tooltip. When <code>auto</code> is specified, it will
1029 dynamically reorient the tooltip. For example, if placement is <code>auto
1030 left</code>, the tooltip will display to the left when possible, otherwise
1031 it will display right.
1032       </div>
1033       <pre class=" language-yaml"><code>
1034 tooltip_placement: 'auto left'
1035
1036 </code></pre>
1037     </td>
1038   </tr>
1039   <tr>
1040     <td class="col-xs-3">
1041 tooltip_selector
1042     </td>
1043     <td>
1044       <div class="help-block">
1045 If a selector is provided, tooltip objects will be delegated to the
1046 specified targets.
1047       </div>
1048       <pre class=" language-yaml"><code>
1049 tooltip_selector: ''
1050
1051 </code></pre>
1052     </td>
1053   </tr>
1054   <tr>
1055     <td class="col-xs-3">
1056 tooltip_trigger
1057     </td>
1058     <td>
1059       <div class="help-block">
1060 How a tooltip is triggered.
1061       </div>
1062       <pre class=" language-yaml"><code>
1063 tooltip_trigger: hover
1064
1065 </code></pre>
1066     </td>
1067   </tr>
1068   </tbody>
1069 </table>
1070
1071 [Drupal Bootstrap]: https://www.drupal.org/project/bootstrap
1072 [Bootstrap Framework]: https://getbootstrap.com/docs/3.3/