CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
szpic
szpic

Reputation: 4496

Tooltip not showing up

I have input group in my form:

 <div class="input-group">
        <div class="input-group-addon" data_toggle="tooltip" data_placement="left" data_content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." id="Contact">
            @Html.LabelFor(model => model.EmployeeNo, new { @class = "control-label" })
        </div>
        <div class="">
            @Html.TextBoxFor(model => model.EmployeeNo, new {@class="form-control" })
            @Html.ValidationMessageFor(model => model.EmployeeNo)
        </div>
    </div>

and tooltip called by this script:

$(document).ready(function () {
    $('#Contact').tooltip();
});

Jquery and bootstrap included. No warning and errors in browser console. What I'm doing wrong?

Upvotes: 0

Views: 130

Answers (2)

RononDex
RononDex

Reputation: 4173

The tooltip function displays whatever you have added into the title attribute of your div.

So you should add the tooltip text to your div:

<div title="..." class="input-group-addon" data_toggle="tooltip" data_placement="left" data_content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." id="Contact">
    @Html.LabelFor(model => model.EmployeeNo, new { @class = "control-label" })
</div>

Another possibility would be to set the content property of the tooltip when creating it:

$(document).ready(function () {
    $('#Contact').tooltip({ content: "..." });
});

Upvotes: 1

Felix
Felix

Reputation: 38102

I'm not sure why you're using data_content here. However, bootstrap require title attribute for the tooltip, so add it to your div:

<div class="input-group-addon" data_toggle="tooltip" data_placement="left" title="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data_content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." id="Contact">
    @Html.LabelFor(model => model.EmployeeNo, new { @class = "control-label" })
</div>

Upvotes: 2

Related Questions