Adding tooltips in jQuery

Question

I have a problem assigning a tooltip to a glyphicon.

I had a look at this JSFiddle, but it is not applicable for my case since I am using jQuery to create the HTML elements like this:

var trashIcon = $('<i>').addClass('glyphicon glyphicon-trash');

Now I want to wrap the following code to match the JSFiddle link... but how can I do this?

var trashToolTip = $('<a>').addClass=('my-tool-tip').attr({ data-toggle:"tooltip" data-placement:"left" title:"Delete" });

CSS:

a.my-tool-tip, a.my-tool-tip:hover, a.my-tool-tip:visited {
    color: black;
}

EDIT:

As seen in the JSFiddle link:

The class CANNOT be tooltip...

var trashIcon looks like this in when parsed into HTML:

`<i class='glyphicon glyphicon-trash'></i>`

I want the HTML version of var trashToolTip, which is the following, to be parent (better term?):

<a class='my-tool-tip' data-toggle="tooltip" data-placement="left" title="delete"></a>

So that it should look like the following code:

<a class='my-tool-tip' data-toggle="tooltip" data-placement="left" title="delete">
    <i class='glyphicon glyphicon-trash'></i>
</a>

Are you able to create a jsFiddle that is applicable to what you're doing? From the question, it is not very clear. Specifically "Now I want to wrap this around to match the jsFiddle linked above". — Seano666
– Seano666, Commented Jan 12, 2016 at 16:19
For one, you have invalid HTML. The <input> element is not a container so there is no such thing as a </input> tag. — Sparky
– Sparky, Commented Jan 12, 2016 at 17:31

BurningLights · Accepted Answer · 2016-01-12 17:25:41Z

2

You can use jQuery's wrap function to achieve that HTML structure. You'd use it like:

trashIcon.wrap(trashToolTip);

answered Jan 12, 2016 at 17:25

BurningLights

2,4071 gold badge17 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1