title: How to disable hover on bootstrap 4 dropdown
body: <p>I have a page with a data grid, and in that grid every row has a bootstrap dropdown button/menu in it with actions you can perform against that data row. The problem is, the menu opens on hover, and I want it to be on click only (so the user doesn't accidentally open the menu on the wrong row).</p>
  <p>Is there a way via CSS to tell the menus to not do anything on hover? I'd prefer not to use jquery for it, and as I have other dropdowns on the page outside the grid, I'd also like to target the ones in the grid specifically so I don't bung up the others.</p>
  <p>Sample cell in ng-repeat row:</p>
  <pre><code>&lt;td class=&quot;text-center&quot; ng-if=&quot;vm.isCustService&quot;&gt;
      &lt;div class=&quot;dropdown drop-down-in-grid&quot;&gt;
          &lt;button type=&quot;button&quot; id=&quot;btnCustDetails_{{$index}}&quot;
                  class=&quot;btn btn-success btn-sm dropdown-toggle&quot;
                  data-toggle=&quot;dropdown&quot;
                  aria-haspopup=&quot;true&quot;
                  aria-expanded=&quot;false&quot;&gt;
              &lt;i class=&quot;fa fa-fw fa-ellipsis-v fa-lg&quot;&gt;&lt;/i&gt;
          &lt;/button&gt;
          &lt;div class=&quot;dropdown-menu dropdown-menu-right&quot; aria-labelledby=&quot;btnCustDetails&quot;&gt;
              &lt;div&gt;
                  &lt;a class=&quot;dropdown-item text-nowrap&quot; href=&quot;/CustomerDetails#/details/&quot; id=&quot;lnkDetails_{{$index}}&quot;&gt;&lt;i class=&quot;fa fa-fw fa-user&quot;&gt;&lt;/i&gt; Customer Details&lt;/a&gt;
                  &lt;a class=&quot;dropdown-item text-nowrap&quot; href=&quot;/CustomerDetails#/addresses/&quot; id=&quot;lnkAddresses_{{$index}}&quot;&gt;&lt;i class=&quot;fa fa-fw fa-address-book-o&quot;&gt;&lt;/i&gt; Addresses&lt;/a&gt;
                  &lt;a class=&quot;dropdown-item text-nowrap&quot; href=&quot;/CustomerDetails#/jobs/&quot; id=&quot;lnkJobs_{{$index}}&quot;&gt;&lt;i class=&quot;fa fa-fw fa-calendar-o&quot;&gt;&lt;/i&gt; Jobs&lt;/a&gt;
                  &lt;a class=&quot;dropdown-item text-nowrap&quot; href=&quot;/CustomerDetails#/createJob/&quot; id=&quot;lnkAddJob_{{$index}}&quot;&gt;&lt;i class=&quot;fa fa-fw fa-calendar-plus-o&quot;&gt;&lt;/i&gt; New Job&lt;/a&gt;
                  &lt;a class=&quot;dropdown-item text-nowrap&quot; href=&quot;/CustomerDetails#/notes/&quot; id=&quot;lnkNotes_{{$index}}&quot;&gt;&lt;i class=&quot;fa fa-fw fa-file-word-o&quot;&gt;&lt;/i&gt; Notes&lt;/a&gt;
                  &lt;a class=&quot;dropdown-item text-nowrap&quot; href=&quot;/CustomerDetails#/statements/&quot; id=&quot;lnkStatements_{{$index}}&quot;&gt;&lt;i class=&quot;fa fa-fw fa-money&quot;&gt;&lt;/i&gt; Statements&lt;/a&gt;
                  &lt;a class=&quot;dropdown-item text-nowrap&quot; href=&quot;/CustomerDetails#/orderSummary/&quot; id=&quot;lnkOrderSummary_{{$index}}&quot;&gt;&lt;i class=&quot;fa fa-fw fa-tasks&quot;&gt;&lt;/i&gt; Order Summary&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/td&gt;
  </code></pre>