bootstrap tooltip dont invoke child

Question

Let's say I have these tags:

<ul data-toggle="tooltip" data-title="hello world">
    <li data-toggle="tooltip" data-title="content 1">content 1</li>
    <li data-toggle="tooltip" data-title="content 2">content 2</li>
    <li data-toggle="tooltip" data-title="content 3">content 3</li>
</ul>

How do I prevent tooltip of ul showing when hover over li tag? Currently when I hover over li both tooltip are showing.

Answer 1

It depends on the case, but you could use the tooltip methods:

$('[data-toggle="tooltip"]').tooltip();

$('li').hover(
  function () {
    $('ul').tooltip('hide');
}, function () {
    $('ul').tooltip('show');
});

body { padding-top: 50px }
ul {
    padding: 20px;
    background: red;
}
li {
    padding: 20px;
    background: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<ul data-toggle="tooltip" data-title="hello world">
    <li data-toggle="tooltip" data-title="content 1">content 1</li>
    <li data-toggle="tooltip" data-title="content 2">content 2</li>
    <li data-toggle="tooltip" data-title="content 3">content 3</li>
</ul>

Answer 2

An alternative to the accepted answer that works with nth-child .tooltip() scenarios:

$(document).ready(function () {
    var tt = $('[data-toggle="tooltip"]');
    tt.tooltip();
    tt.on('show.bs.tooltip', function (e) {
        tt.not($(this)).tooltip('hide');
    });
});

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
 body {
  padding: 50px;
}
ul {
  padding: 10px;
  border: 2px dashed steelblue;
  list-style-type: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<ul data-toggle="tooltip" data-title="hello world">
    <li data-toggle="tooltip" data-title="content 1"><a data-toggle="tooltip" data-title="link!">content 1</a></li>
    <li data-toggle="tooltip" data-title="content 2">content 2</li>
    <li data-toggle="tooltip" data-title="content 3">content 3</li>
</ul>