JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://test-drupal.k-net.fr/sites/all/themes/bootstrap/css/k-net.css">
<link rel="stylesheet" href="http://test-drupal.k-net.fr/sites/all/themes/bootstrap/css/overrides.css">
<div class="tabs-installation">
	<div class="tab-content tabs-installation-intern">
        <div class="tab-pane active" id="default-tab">
			<p><img src="/sites/default/files/schema_cablage_base.jpg"></p>
		</div>
		<div class="tab-pane" id="tel">
		    <p><img src="/sites/default/files/schema_cablage_telephone.png"></p>
        </div>
		<div class="tab-pane" id="tv">
			 <p><img src="/sites/default/files/schema_cablage_tv.png"></p>
		</div>
		<div class="tab-pane" id="internet">
		   <p><img src="/sites/default/files/schema_cablage_internet.png"></p>
		</div>
		<div class="tab-pane" id="wifi">
		     <p><img src="/sites/default/files/schema_cablage_wifi.png"></p>		
		</div>
	</div>
    	<ul class="nav nav-tabs tabs-installation-out" id="opt-installation">
        <li class="active" style="display:none;"><a data-toggle="tab" href="#default-tab">&nbsp;</a></li>
		<li><a data-toggle="tab" href="#tel">Téléphone</a></li>
		<li><a data-toggle="tab" href="#tv">Télévision</a></li>
		<li><a data-toggle="tab" href="#internet">Internet</a></li>
		<li><a data-toggle="tab" href="#wifi">Wifi</a></li>
	</ul>
</div>

JavaScript

$('.nav-tabs > li > a').mouseover( function(){
      $(this).tab('show');
   });
$('.nav-tabs > li > a').mouseout( function(){
      $('#opt-installation a[href="#default-tab"]').tab('show');
   });