CODEWITHSUNDEEP
angularjstwitter-bootstrapangular-ui-bootstrap
Peter Albert
Peter Albert

Reputation: 17495

Element with popover and tooltip

In a large form, I'm using popovers to display error messages from the validation (I know, not best practice).

Now, I also want to add tooltips to display detailed explanation of the input.

However, using both, the tooltip and the popover directive (and their associated -trigger and -placement directives), the behavior is odd/buggy: Both, tooltip and popover are placed based on the popover-placement directive (ignoring the tooltip-placement) - and display the text provided for the popover.

<button class="btn btn-default"
    popover="Popover" popover-trigger="mouseenter" popover-placement="right" 
    tooltip="Tooltip" tooltip-trigger="mouseenter" tooltip-placement="top" >
Label</button>

See this plunkr.

Any idea how to make this work?

Upvotes: 0

Views: 2937

Answers (2)

deepanshu
deepanshu

Reputation: 34

A very Simple Way..Just Make a parent Span for the button and attach those properties with that Span. I have Some Code for that too

<span title="Popover title" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Some content in Popover on bottom">
       <button type="button" class="btn btn-default" data-toggle="tooltip"  data-placement="right" title="Tooltip on right">Tooltip on right</button>
</span>

Here is the JS Fiddle for that too

http://jsfiddle.net/h75k1fzj/

Upvotes: 1

KyleMit
KyleMit

Reputation: 30107

They actually infact use the same placement function.

From the docs on popover:

The popover directive also supports various default configurations through the $tooltipProvider. See the tooltip section for more information.

Meaning if you had the following code:

app.config(['$tooltipProvider', function($tooltipProvider){
  $tooltipProvider.options({
    'placement': 'right'
  });
}]);

It would change the default for both tooltips and popovers.

Best I can think of is it have some sort of wrapper around the element so you can do each in turn.

<button class="btn btn-default sampleBtn"
  popover="Popover" popover-trigger="mouseenter" popover-placement="right">
  <span tooltip="Tooltip" tooltip-trigger="mouseenter"  tooltip-placement="top">
    Tooltip + Popover
  </span>
</button>

Demo in Plunker

screenshot

Upvotes: 3

Related Questions