1
votes

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');
}
1
Can you perhaps provide more code? Perhaps a JSFiddle? To actually see your problem in action? - Rotan075
If you could include the html, or better yet, create a bootply, we will be better able to assist you. - Ted
I created this bootply, which seems to work fine...I think we need to see your HTML - Ted

1 Answers

0
votes

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');
        }
    });

});