折叠div内的Bootstrap工具提示位置

Question

Im creating a bootstrap accordion with collapsed panels to hold form input. Im trying to create a tooltip inside a collapsed panel above the input for validation output.

• Submit button is pressed it calls setTooltip function of each input.
• Header panel (opens collapse content) then calls displayTooltip.

PROBLEM: When the panel is opened from collapse,all the tooltips are positioned around 50px above the input at (requires a collapse and open to repostion to correct place).

Can anyone suggest a method for refreshing the tooltip that is inside the collapsed div or somehow resetting its position to correct place above input?

EDIT- The placement is correct when submitting and calling setTooltip and the div is not collapsed.

function setTooltip(obj, value, pos) {
    options = {placement: pos, trigger: 'manual'}

    $(obj).tooltip(options)
            .attr('data-original-title', value)
            .tooltip('fixTitle');
}

function displayTooltip(obj) {
    options = {placement: "top", trigger: 'manual'}

    $(obj).tooltip(options).tooltip('show');
}

Answer 1

I have created an example JSFiddle where I use bootstrap tooltip in combination with a accordion object.

Is this what you want? http://jsfiddle.net/dheLm7u6/

JQUERY:

$(function () {
    $('#buttonid').click(function()
    {
        if( !$('.test1').val() ) {
              $('[data-toggle="tooltip"]').tooltip('show');
        }
    });

});