JDoeBloke JDoeBloke - 5 months ago 18
Javascript Question

Cannot trigger a tooltip using bootstrap gives an error

I've created a tooltip to show if

mouse is over
a truncated text.
But I get the following error


Error: cannot call methods on tooltip prior to initialization; attempted to call method 'options'.


I've also tried to call it when ellipsis is active, doesn't work as well. What is wrong here? How can it all be done?

html:

<div>
<label class='form-control' data-toggle='tooltip' data-placement='bottom' title='something'>truncated text</label>
<div>


Script:

$(document).on('mouseenter', ".form-control", function () {
var $this = $(this);
if (this.offsetWidth > this.scrollWidth) {
$this.tooltip('options', 'show');
}
});

Answer Source

Refer http://codepen.io/avnish002/pen/rxjWzE

$(document).on('mouseenter', ".iffyTip", function () {
     var $this = $(this);
     if (this.offsetWidth < this.scrollWidth && !$this.attr('title')) {
         $this.tooltip({
             title: $this.text(),
             placement: "top"
         });
         $this.tooltip('show');
     }
 });
$('.hideText').css('width',$('.hideText').parent().width());