Show datat-content when hover on glyphicon glyphicon-info-sign

Question

I am showing some information when mouse hovering on glyphicon sign. The code is working now but only for add content. I want to uses the same JQuery code for edit, delete ..ect. I do not want to repeat the Jquery code again and again.

How to do that?

HTML:

<input name="add" value="1" type="checkbox"  /> 
Add Contents  
<a href="#"  title="Add" data-content="1- Problem Report. 2- Maintenance Report. 3- Expeses Report. 4- Add Contract. 5-Items">
    <span class="glyphicon glyphicon-info-sign" id="add_inf"></span>
</a> 

<input name="edit" value="1" type="checkbox" /> 
Edit Contents 
<a href="#" title="Edit" data-content="1- Problem Report. 2- Maintenance Report. 3- Expeses Report. 4- Contract.">
    <span class="glyphicon glyphicon-info-sign" id="edit_inf"></span>
</a>

<input name="delete" value="1" type="checkbox" /> 
Delete Content
<a href="#" title="Delete" data-content="1- Problem Report. 2- Maintenance Report. 3- Expeses Report. 4- Contract. 5-Items">
    <span class="glyphicon glyphicon-info-sign" id="delete_inf"></span>
</a>

JQuery:

var $btn2 = $('#add_inf');
$btn2.data('state', 'hover');

var enterShow = function () {
    if ($btn2.data('state') === 'hover') {
        $btn2.popover('show');
    }
};

var exitHide = function () {
    if ($btn2.data('state') === 'hover') {
        $btn2.popover('hide');
    }
};

var clickToggle = function () {
    if ($btn2.data('state') === 'hover') {
        $btn2.data('state', 'pinned');
    } else {
        $btn2.data('state', 'hover')
        $btn.popover('hover');
    }
};

$btn2.popover({ trigger: 'manual' })
    .on('mouseenter', enterShow)
    .on('mouseleave', exitHide)
    .on('click', clickToggle);

score 2 · Accepted Answer · edited May 23 '17 at 11:51

It only works for Add content because you have assigned these events only to it.

Here:

var $btn2 = $('#add_inf');

You need to assign it to all of your glyphicons:

var $btn2 = $('#add_inf, #edit_inf, #delete_inf');

or even much better using classes:

var $btn2 = $('.glyphicon.glyphicon-info-sign'); // or another custom one

Note that in your events, in order to show popover not for all events, but only for the active one, you need to work with the triggered object using this:

function enterShow() {
    var $this = $(this);
    if ($this.data('state') === 'hover') {
        $this.popover('show');
    }
};
function exitHide() {
    var $this = $(this);
    if ($this.data('state') === 'hover') {
        $this.popover('hide');
    }
};

function clickToggle() {
    var $this = $(this);
    if ($this.data('state') === 'hover') {
        $this.data('state', 'pinned');
    } else {
        $this.data('state', 'hover')
        $this.popover('hover');
    }
};

Note how I have changed the declaration of a function. Use this one, when possible. (Why?)

Show datat-content when hover on glyphicon glyphicon-info-sign

1 Answers1