BOOTSTRAP: DATA- ATTRIBUTE EXAMPLES

gistfile1.html

<script>
var dismiss = '[data-dismiss="alert"]'

 // ALERT DATA-API
var buttons = '[data-toggle="buttons"]'

 // BUTTON DATA-API
var button ='[data-toggle="button"]'

// CAROUSEL DATA-API
var slide ='[data-slide="slide"]'
var slideTo ='[data-slide-to="slide"]'
var ride = '[data-ride="carousel"]'

    // COLLAPSE DATA-API
var collapse = '[data-toggle="collapse"]'
var target  = '[data-target="target"]'
var parent  = '[data-parent="#parentElementID"]'

var dropDown = '[data-toggle = "dropdown"]'
var dismiss  = '[data-dismiss="modal"]'

 // MODAL DATA-API
var toggleModal = '[data-toggle="modal"]'
var originalTitle = '[data-original-title="title"]'
var content = '[data-content="content"]'

// SCROLLSPY DATA-API
var spy = '[data-spy="scroll"]'
var anotherTarget = '[data-target="target"]'

// TAB DATA-API
var toggleTab = '[data-toggle="tab"]'
var togglePill = '[data-toggle="pill"]'

// AFFIX DATA-API
var anotherSpy = '[data-spy="spy"]'

//examples:
data-target=".navbar-collapse"

</script>

//ALERT DISMISS data-dismiss="alert"
<a class="close" data-dismiss="alert">×</a>

//BUTTONS data-toggle="buttons" example
<div class="btn-group btn-group-sm btn" data-toggle="buttons">

//DISMISS EXAMPLE data-dismiss-modal
<button class="btn btn-success" data-dismiss="modal">Close</button>

//DROPDOWN EXAMPLE data-toggle="dropdown"
<button class="btn btn-success" data-toggle="dropdown"><span class="caret"></span></button>



//MODAL EXAMPLE data-toggle="modal" data-dismiss="modal"
<a href="#sentDialog" class="btn btn-info" data-toggle="modal">Show Dialog</a>
<button class="btn btn-success" data-dismiss="modal">Close</button>

//EXAMPLE ORIGINAL TITLE  data-original-title
          <!-- Stay Connected -->
          <div class="headline">
            <h3>Stay Connected</h3>
          </div>
          <ul class="social-icons">
            <li>
              <a href="http://feeds.feedburner.com/ShawnWildermuth" data-original-title="Feed" class="rss"></a>
            </li>
            <li>
              <a href="https://twitter.com/ShawnWildermuth" data-original-title="Twitter" class="twitter"></a>
            </li>
            <li>
              <a href="http://github.com/shawnwildermuth" data-original-title="GitHub" class="github"></a>
            </li>
            <li>
              <a href="http://www.amazon.com/-/e/B001H6ME46" data-original-title="Amazon Author" class="amazon"></a>
            </li>
            <li>
              <a href="https://www.facebook.com/ShawnWildermuth" data-original-title="Facebook" class="facebook"></a>
            </li>
            <li>
              <a href="//plus.google.com/111559350021454363997?prsrc=3" rel="publisher" data-original-title="Google Plus" class="googleplus"></a>
            </li>
            <li>
              <a href="http://www.linkedin.com/in/shawnwildermuth/" data-original-title="Linkedin" class="linkedin"></a>
            </li>
          </ul>
        </div>


//PROGRESSBAR data-percentage example
<div class="progress-bar progress-bar-danger" role="progressbar" data-percentage="90"></div>


//TOOLTIP PLACEMENT EXAMPLE data-placement
<a href="#" class="tooltip-test" data-placement="top" title="Default tooltip">Tooltip on top</a>

<a href="#" class="tooltip-test" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</a>

<li><a href="#" class="tooltip-test" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</a>

I have been searching for DAYS for this exact documentation for Bootstrap5. It's maddening! :) I am going to take this, though, and see what still works. I know all of the data attributes in BS5 have to change to data-bs-*="", but you would think someone has made a handy list like yours above, so THANK YOU! :)