create a hover-tooltip which can be clicked in angularjs

javascript jquery angularjs twitter-bootstrap twitter-bootstrap-tooltip
akashrajkn picture akashrajkn · Jun 3, 2015 · Viewed 7.4k times · Source

I am trying to create a hover-tooltip using Bootstrap UI. The tooltip should be visible when mouse is hovered on the button, the tooltip has a link which should be clickable. But the default popover and tooltip provided by Bootstrap UI, disappear when mouse comes out of it. I have searched a lot online, but couldn't find a solution. Some sites have given a solution using jQuery, but my requirement is in AngularJS. Many sites cite that we have to use $tooltipProvider, could you please tell me how to write a customEvent for 'mouseenter' and 'mouseleave' inside the controller.

Answer

Ritesh Kashyap picture Ritesh Kashyap · Jun 3, 2015

Are you looking for popover tooltip which is being stable and hide once it is accessed...Please see below working fiddle:

FIDDLE

<i class="fa fa-info-circle infoIcon" data-toggle="popover" data-content='Lorem Ipsum<br/><a href="#"><span class="learnMore">Learn More</span></a>'></i>

JS:

<i class="fa fa-info-circle infoIcon" data-toggle="popover" data-content='Lorem Ipsum<br/><a href="#"><span class="learnMore">Learn More</span></a>'></i>

Related questions

how to bind Bootstrap-datepicker element with angularjs ng-model?

Here is the html for the date field : <div class='form-group'> <label>Check out</label> <input type='text' ng-model='checkOut' class='form-control' data-date-format="yyyy-mm-dd" placeholder="Check out" required id="check-out"> </div&…

Read More
angular ui modal after close event

Is there a way I can call a function after a modal window got called (no matter if it happened with a button or by clicking on the backdrop) var dialog, options; options = { windowClass: "lightBox" templateUrl: "url to the template", …

Read More
"Thinking in AngularJS" if I have a jQuery background?

Suppose I'm familiar with developing client-side applications in jQuery, but now I'd like to start using AngularJS. Can you describe the paradigm shift that is necessary? Here are a few questions that might help you frame an answer: How do …

Read More