<!DOCTYPE html>
<html ng-app="foundationDemoApp">
<head>
<link rel="stylesheet" href="style.css">
<script src="//code.angularjs.org/1.3.17/angular.js"></script>
<script src="//pineconellc.github.io/angular-foundation/mm-foundation-tpls-0.6.0.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.4.7/css/foundation.css"/>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"/>
<script src="script.js"></script>
<style>
.tooltip {
position: initial;
max-width: 100%;
margin-bottom: 0.4rem;
}
</style>
</head>
<body>
<div>
<span
class="helper"
tooltip-placement="bottom"
tooltip-trigger="mouseenter"
tooltip-animation="false"
tooltip="This is a tooltip">
<i class="fa fa-info-circle"></i>
<small>(1. click the i icon to open the tooltip)</small>
</span>
</div>
<ul>
<li style="height: 25px;">
<label>
<input type="radio" name="options" value="one">
One <small>(2. click me after opening the tooltip)</small>
</label>
</li>
<li style="height: 25px;">
<label>
<input type="radio" name="options" value="two">
Two
</label>
</li>
<li style="height: 25px;">
<label>
<input type="radio" name="options" value="three">Three
<small>(3. I will recieve the click not radio <b>One</b>)</small>
</label>
</li>
</ul>
<b>To reproduce the problem open it on a touch device, or open chrome device emmulation</b>
<ul>
<li>Tooltip is based on <a hreft="https://github.com/pineconellc/angular-foundation">Angular-Foundation</a></li>
<li>In this implementation we adjusted the style of the tooltip to be shown with position:initial</li>
<li>The tooltip is also shown full width</li>
<li>On a touch device the mouse enter is tracked with clicks</li>
<li>After clicking the info icon the tooltip is shown</li>
<li>Clicking the radio button <b>One</b>, will cause the tooltip to disappear which is correct behavior</li>
<li>But instead of having radio button <b>One</b> selected, it will select <b>Three</b> </li>
<li>This is because after click radio button <b>One</b>, the tooltip is removed and the radio group is shifted up</li>
<li>So the <b>Three</b> radio button will receive the click</li>
</ul>
</body>
</html>
// Code goes here
angular.module('foundationDemoApp', ['mm.foundation']);
/* Styles go here */