Bootstrap tooltip

HTML & CSS
1

Hi,

I cant seem to get bootstrap tooltip to work within a mysql foreach loop… Should the bootstrap tooltip work in this situation? It works fine with just a standard html link on the same page…

Thanks

2

It appears to work on the first record within the loop…

code:


<?php

	$sql = mysql_query("SELECT * FROM customers $where ORDER BY customer ASC");
		while ($row = mysql_fetch_array($sql)) {
			foreach($row as $key=>$value){
				$$key = ValidateOutput($value);
	}
	
	
	echo ''.$customer.' -->
	<a id="myTooltip" href="#" data-toogle="tooltip" title="Contact Details" data-placement="bottom"><i class="fa fa-mobile fa-2x" style="color:green"></i></a> |
	<a id="myTooltip" href="#" data-toogle="tooltip" title="Job Cards" data-placement="bottom"><i class="fa fa-folder-open fa-2x" style="color:green"></i></a> |
	<a id="myTooltip" href="#" data-toogle="tooltip" title="Edit Customer Details" data-placement="bottom"><i class="fa fa-pencil-square-o fa-2x" style="color:green"></i></a> | 
	<a id="myTooltip" href="#" data-toogle="tooltip" title="Add Job Card" data-placement="bottom"><i class="fa fa-pencil fa-2x" style="color:green"></i></a>
	<br />';
	
	}
	
	?>
    
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

	<script type="text/javascript">
        $(document).ready(function() {
            $('#myTooltip').tooltip();
        });
	</script>
3

An id is unique to the page so there can only be one of them on the page. Change the myTooltip id to a class instead and use that in your jquery selector.


<a class="myTooltip" ... etc



 <script type="text/javascript">
        $(document).ready(function() {
        [B]    $('.myTooltip').tooltip();[/B]
        });
    </script>
4

Ahh of course… thanks :slight_smile: