Bootstrap provides in-built support for making popovers. A popover is a content box that appears when a user triggers a specific event with specified element selector. Here, we will discuss methods to trigger popover using “hover” instead of “click”.
Method 1: Here, we will specify popover trigger in ‘hover’ using jQuery initialization only. We can add title details as well as trigger criteria in popover() function itself as parameters.
-
Program:
<!-- Using jQuery initialization only --><!DOCTYPE html><html><head><!-- CDN's required --><linkrel="stylesheet"href=<scriptsrc=</script><scriptsrc=</script></head><body><divclass="container"><center><h1style="color:green;">GeeksforGeeks</h1><b>Bootstrap popover appear/disappearon hover instead of click</b><br><br><buttonclass="btn btn-success"data-toggle="popover"data-content="Computer Science Portal for Geeks"data-placement="bottom">Hover here!</button></center></div><script>$('[data-toggle="popover"]').popover({title: "GeeksforGeeks",trigger: "hover"});</script></body></html> -
Output:
Method 2: Here we will be using ‘data-trigger’ attribute. We can also achieve the same by placing ‘title’ and ‘data-trigger’ as attributes without specifying them as parameters in popover() method.
-
Program:
<!-- Using data-trigger attribute --><!DOCTYPE html><html><head><!-- CDN's required --><linkrel="stylesheet"href=<scriptsrc=</script><scriptsrc=</script></head><body><divclass="container"><center><h1style="color:green;">GeeksforGeeks</h1><b>Bootstrap popover appear/disappearon hover instead of click</b><br><br><buttonclass="btn btn-success"title="GeeksforGeeks"data-toggle="popover"data-trigger="hover"data-content="Computer Science Portal for Geeks"data-placement="bottom">Hover here!</button></center></div><script>$('[data-toggle="popover"]').popover();</script></body></html> -
Output: