1

I am implementing an HTML5 like error tooltip using Bootstrap popover. Like the HTML5 version, I would like to apply an offset to tooltip so it shifts to the right. Try as I may, I have not been able to accomplish this.

I have tried several the templating approaches with no success. The Bootstrap Popover document shows "offset" as an option and points to a cryptic Tether document. Adding the offset option (ex. offset: '0 25%') does not seem to work either.

enter image description here

validate.issueError = function ($elem, msg, placement) {
    placement = placement == undefined ? 'bottom' : placement;
    var offset = $elem.width() / 4;
    var template = '<div class="popover"  style="position:relative; margin-left:' + offset + 'px" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
    console.log("template="+ template)

    $elem.prop('data-toggle=popover', true);
    var exclamationPoint = "<span style='font-weight: bold; font-size:medium; color: white; background-color: orange; height: 12px; padding: 1px 8px; margin-right: 8px;'>!</span>";
    var content = "<span style='font-size: smaller;'>" + msg + "</span>";
    $elem.popover("destroy").popover({
        html: true,
        placement: placement,
        template: template,
        content: exclamationPoint + content
    }).popover('show');

    setTimeout(function () { $elem.popover('hide') }, 5000);
    $elem.focus();
    $elem.on("keydown click", function () {
        console.log("kd?")
        $(this).popover('hide');
    })
}
ron tornambe
  • 10,452
  • 7
  • 33
  • 60

1 Answers1

3

Did you try just passing it as a data-attribute? data-offset is the specific one. Here's an example for a button.

Steven B.
  • 8,962
  • 3
  • 24
  • 45
  • Thanks for pointing me in the right direction. Unfortunately, when I add the property dynamically, ex. $e.lem.prop("data-offset", "0 25%") it has no effect. In the console I can see the property has been added correctly. Any ideas are appreciated – ron tornambe Aug 03 '16 at 22:14
  • @rontornambe only thing I can think is that you are instantiating it before you are adding the `data-offset` attribute. I tried it [here](https://jsfiddle.net/71u4jd28/1/) and it worked fine. – Steven B. Aug 04 '16 at 14:37