0
<a href="https://jsfiddle.net/krishna2909/amxLak5d/">Clcik here</a>

Here in the above link I kept the code for which I'm testing. How can I change the on click functionality to on hover functionality?

halfer
  • 19,824
  • 17
  • 99
  • 186
AizaMInd
  • 31
  • 1
  • 8
  • Please include a link or a piece of code. There is no content. – M. Foldager Aug 12 '17 at 09:20
  • Sorry I'm new here Now I'm edited it – AizaMInd Aug 12 '17 at 09:27
  • I have added a solution below. Alternatively, check out the duplicate suggestion. – M. Foldager Aug 12 '17 at 09:31
  • Without code in the question itself, this question is off-topic. Questions and answers here are for future readers, and if a JS Fiddle link is deleted, it will mean the question (and any answers) also needs to be deleted. Would you be able to repair the question now? – halfer Aug 12 '17 at 10:18

2 Answers2

1

Here you go with a solution https://jsfiddle.net/amxLak5d/2/

$(function(){
    $('[rel="popover"]').popover({
        container: 'body',
  
        html: true,
        content: function () {
            var clone = $($(this).data('popover-content')).clone(true).removeClass('hide');
            return clone;
        },
        trigger: "hover"
    }).hover(function(e) {
        e.preventDefault();
    });
    
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <!--How to change Onclick Function to On Hover Function-->
    <nav class="navbar navbar-toggleable-xl navbar-light back_trans100">
     <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#"><img src="images/logo.png" class="img-responsible"></a>
    </div>
    <ul class="nav navbar-nav navbar-right">
     <li class="active">
       <a href="#" rel="popover" data-placement="bottom" data-popover-content="#myPopover">My Popover</a>
      <div id="myPopover" class="hide">
       This is a popover list:
       <ul>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
       </ul>
      </div>
     </li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
     </div>
   </nav>

Just add trigger: "hover" property.

Reference document: https://www.w3schools.com/bootstrap/bootstrap_ref_js_popover.asp

Shiladitya
  • 12,003
  • 15
  • 25
  • 38
  • Thanks For Your Help Brother – AizaMInd Aug 12 '17 at 09:36
  • Welcome buddy :) – Shiladitya Aug 12 '17 at 09:36
  • This is helpful Shiladitya, but it would probably be better to wait for the question to be on-topic before answering. Questions featuring just an external link to code are likely to be closed, since we want them to be self-contained. This protects against future link breakage. My experience is that once new community members have got their answer, they are not likely to edit the question to make it self-contained. – halfer Aug 12 '17 at 10:20
  • 1
    @halfer.. I got your point. Going forward I'll keep in mind. :) – Shiladitya Aug 12 '17 at 10:22
0

Change the element with the popover to include a data-trigger with the value hover:

<a href="#" rel="popover" data-placement="bottom" data-popover-content="#myPopover" data-trigger="hover">My Popover</a>

https://jsfiddle.net/amxLak5d/1/

M. Foldager
  • 190
  • 14