/    Sign up×
Community /Pin to ProfileBookmark

add property to HTML Tag (custom)

Copy linkTweet thisAlerts:
Jul 11.2007

Is there a way i can add my own property to an HTML tag.

for example. I would like a toolTip property (not title)
so i tried something like so

[code]
<html>
<head>

<title>Untitled Document</title>

<script>

function ToolTip(element)
{
alert(element.toolTip);
}

</script>

</head>

<body>

<div id=”test” [B]toolTip=”This is a test of my tool tip;”[/B] onclick=”ToolTip(this); return false;”>Click here </div>

</body>
</html>

[/code]

This works great in IE 7 , but not Fire Fox.

Does anyone know if i can create a property in FireFox ?

Drew

to post a comment
JavaScript

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@toicontienJul 11.2007 — You can create the property using the DOM, but not in HTML. If you need to add custom data to the markup, what you should be doing is adding an Id and/or class name to the tag so you can link it up to a data structure in JavaScript:
[code=html]<div class="tooltip tt_test"></div>[/code]
window.onload = function() {
addTooltips();
};


function addTooltips() {
var i = end = 0;
var els;
if (document.getElementsByTagName) {
els = document.getElementsByTagName('*');
for (i, end = els.length; i &lt; end; i++) {
if (els[i].className.indexOf('tooltip') &gt; -1) {
els[i].onmouseover = showTooltip;
}
}
}
}


function showTooltip() {
alert(Tooltips[this.className.split(' ')[1]);
}


var Tooltips = {
tt_test: 'This is my test tool tip.'
};
In all reality, your implimentation would best use the title attribute of an HTML tag. That way your tooltip would still show when JS is disabled.
Copy linkTweet thisAlerts:
@cgishackauthorJul 11.2007 — Interesting.. Thanks for the help.

I'm not too sure if you have seen the Yahoo Ext Javascript lib.

They have a thing called "QuickTips" and it can be imlemented into any tag like so.

<i>
</i> &lt;span [B]ext:qtip="This is my tooltip1 ..."[/B]&gt;Test1&lt;/span&gt;&lt;br /&gt;


I was hoping to do something like this a script I am developing.

Maybe they parse through the markup or something...

Thanks again,

Drew
Copy linkTweet thisAlerts:
@KorJul 11.2007 — If you have a custom HTML attribute, you may use [B]getAttribute() [/B]or [B]getAttributeNode().nodeValue[/B] methods...

<i>
</i>function ToolTip (element){
alert(element.getAttribute('toolTip'));
alert(element.getAttributeNode('toolTip').nodeValue)
}
Copy linkTweet thisAlerts:
@cgishackauthorJul 11.2007 — Sweet!

Thanks You.
Copy linkTweet thisAlerts:
@felgallJul 11.2007 — If you are going to create your own attributes then you should be using XHTML rather than HTML and should specify your own DOCTYPE that defines the attributes you are adding.
×

Success!

Help @cgishack spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.23,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...