* tooltips
@ 2014-01-14 7:08 Rustom Mody
2014-01-14 15:15 ` tooltips Bastien
0 siblings, 1 reply; 10+ messages in thread
From: Rustom Mody @ 2014-01-14 7:08 UTC (permalink / raw)
To: emacs-orgmode
I was wondering if org-mode html generation has some automatic way of
generating tooltips.
Something along the lines that instead of generating a footnote, a
footnote should generate a tooltip. The html would be something like
this:
<!DOCTYPE html>
<html>
<body>
<div title="Hi! Now you see me!">hover me</div>
</body>
^ permalink raw reply [flat|nested] 10+ messages in thread
* Re: tooltips
2014-01-14 7:08 tooltips Rustom Mody
@ 2014-01-14 15:15 ` Bastien
2014-01-14 17:46 ` tooltips Christian Moe
0 siblings, 1 reply; 10+ messages in thread
From: Bastien @ 2014-01-14 15:15 UTC (permalink / raw)
To: Rustom Mody; +Cc: emacs-orgmode
Hi Rustom,
Rustom Mody <rustompmody@gmail.com> writes:
> I was wondering if org-mode html generation has some automatic way of
> generating tooltips.
>
> Something along the lines that instead of generating a footnote, a
> footnote should generate a tooltip. The html would be something like
> this:
>
> <!DOCTYPE html>
> <html>
> <body>
> <div title="Hi! Now you see me!">hover me</div>
> </body>
Instead of changing the current HTML, I'd rather go and find a
solution where some javascript can display the tooltip.
Did you look for this?
--
Bastien
^ permalink raw reply [flat|nested] 10+ messages in thread
* Re: tooltips
2014-01-14 15:15 ` tooltips Bastien
@ 2014-01-14 17:46 ` Christian Moe
2014-01-14 18:40 ` tooltips Rustom Mody
2014-01-14 19:03 ` tooltips Bastien
0 siblings, 2 replies; 10+ messages in thread
From: Christian Moe @ 2014-01-14 17:46 UTC (permalink / raw)
To: Bastien; +Cc: Rustom Mody, emacs-orgmode
Bastien writes:
> Instead of changing the current HTML, I'd rather go and find a
> solution where some javascript can display the tooltip.
E.g.:
-----------
$(document).ready(fntooltips);
function fntooltips() {
$(".footnum").each(
function () {
$("[href='#" + this.id + "']")
.attr("title",
this.parentNode.parentNode.textContent);
}
)
}
-------------
Tested with JQuery 1.9.1 and a recent Org.
Yours,
Christian
^ permalink raw reply [flat|nested] 10+ messages in thread* Re: tooltips
2014-01-14 17:46 ` tooltips Christian Moe
@ 2014-01-14 18:40 ` Rustom Mody
2014-01-14 21:30 ` tooltips Christian Moe
2014-01-14 19:03 ` tooltips Bastien
1 sibling, 1 reply; 10+ messages in thread
From: Rustom Mody @ 2014-01-14 18:40 UTC (permalink / raw)
To: Christian Moe; +Cc: Bastien, emacs-orgmode
On Tue, Jan 14, 2014 at 11:16 PM, Christian Moe <mail@christianmoe.com> wrote:
>
> Bastien writes:
>
>> Instead of changing the current HTML, I'd rather go and find a
>> solution where some javascript can display the tooltip.
>
> E.g.:
>
> -----------
>
> $(document).ready(fntooltips);
>
> function fntooltips() {
> $(".footnum").each(
> function () {
> $("[href='#" + this.id + "']")
> .attr("title",
> this.parentNode.parentNode.textContent);
> }
> )
> }
>
> -------------
>
> Tested with JQuery 1.9.1 and a recent Org.
>
> Yours,
> Christian
May I have the setup?
ie where do I put that JS, the invocation/import or whatever of JQuery etc
[I really dont know any JS!]
^ permalink raw reply [flat|nested] 10+ messages in thread* Re: tooltips
2014-01-14 18:40 ` tooltips Rustom Mody
@ 2014-01-14 21:30 ` Christian Moe
2014-01-15 16:56 ` tooltips Bastien
0 siblings, 1 reply; 10+ messages in thread
From: Christian Moe @ 2014-01-14 21:30 UTC (permalink / raw)
To: Rustom Mody; +Cc: Bastien, emacs-orgmode, Christian Moe
[-- Attachment #1: Type: text/plain, Size: 971 bytes --]
Rustom Mody writes:
> May I have the setup?
> ie where do I put that JS, the invocation/import or whatever of JQuery etc
> [I really dont know any JS!]
I attach a zip file. It expands to a folder containing three files: a
sample Org document, a current version of JQuery, and the code snippet I
posted. Open the Org and export to HTML, you should see very simple
popups when you hover over the footnote markers.
JQuery is a library that makes it easier to get stuff done in
javascript. You may want to get your own at http://jquery.com.
All the Org setup you need to make it work is in the lines:
#+HTML_HEAD: <script src="jquery.js"></script>
#+HTML_HEAD: <script src="fntooltip.js"></script>
On an actual website, you might not have the javascript in the same
folder as the HTML, so you'd need to edit the HTML_HEAD
lines to give the right path to the .js files relative to the HTML
document.
Let me know if this doesn't work or isn't clear.
Yours,
Christian
[-- Attachment #2: fntooltip.zip --]
[-- Type: application/x-zip-compressed, Size: 34057 bytes --]
^ permalink raw reply [flat|nested] 10+ messages in thread
* Re: tooltips
2014-01-14 21:30 ` tooltips Christian Moe
@ 2014-01-15 16:56 ` Bastien
2014-01-15 18:25 ` tooltips Rustom Mody
0 siblings, 1 reply; 10+ messages in thread
From: Bastien @ 2014-01-15 16:56 UTC (permalink / raw)
To: Christian Moe; +Cc: Rustom Mody, emacs-orgmode
Christian Moe <mail@christianmoe.com> writes:
> Let me know if this doesn't work or isn't clear.
It works very well!
I made a micro screencast for demoing it:
http://bzg.fr/u/org-footnotes-jquery.ogv
Thanks for packaging this.
--
Bastien
^ permalink raw reply [flat|nested] 10+ messages in thread
* Re: tooltips
2014-01-15 16:56 ` tooltips Bastien
@ 2014-01-15 18:25 ` Rustom Mody
2014-01-15 22:14 ` tooltips Christian Moe
0 siblings, 1 reply; 10+ messages in thread
From: Rustom Mody @ 2014-01-15 18:25 UTC (permalink / raw)
To: Bastien; +Cc: emacs-orgmode, Christian Moe
On Wed, Jan 15, 2014 at 10:26 PM, Bastien <bzg@gnu.org> wrote:
> Christian Moe <mail@christianmoe.com> writes:
>
>> Let me know if this doesn't work or isn't clear.
>
> It works very well!
>
> I made a micro screencast for demoing it:
> http://bzg.fr/u/org-footnotes-jquery.ogv
>
> Thanks for packaging this.
>
> --
> Bastien
Thanks Christian for that.
Just one small thing -- Can we remove the number?
[I tried to look at the js but could not figure out the details and
also the debugging model]
^ permalink raw reply [flat|nested] 10+ messages in thread
* Re: tooltips
2014-01-15 18:25 ` tooltips Rustom Mody
@ 2014-01-15 22:14 ` Christian Moe
2014-01-16 1:27 ` tooltips Rustom Mody
0 siblings, 1 reply; 10+ messages in thread
From: Christian Moe @ 2014-01-15 22:14 UTC (permalink / raw)
To: Rustom Mody; +Cc: Bastien, emacs-orgmode, Christian Moe
Rustom, Bastien,
Bastien writes:
>> I made a micro screencast for demoing it:
>> http://bzg.fr/u/org-footnotes-jquery.ogv
Thanks, Bastien, that's cool!
Rustom Mody writes:
> Thanks Christian for that.
> Just one small thing -- Can we remove the number?
Sure, try this new version of fntooltip.js:
----------------------
$(document).ready(fntooltips);
function fntooltips() {
$(".footnum").each(
function () {
$("[href='#" + this.id + "']")
.attr("title",
$(this).closest("div").find("p").text().trim());
}
)
}
----------------------
The only line that's changed is the one that now goes
$(this).closest("div").find("p").text().trim());
Yours,
Christian
^ permalink raw reply [flat|nested] 10+ messages in thread
* Re: tooltips
2014-01-14 17:46 ` tooltips Christian Moe
2014-01-14 18:40 ` tooltips Rustom Mody
@ 2014-01-14 19:03 ` Bastien
1 sibling, 0 replies; 10+ messages in thread
From: Bastien @ 2014-01-14 19:03 UTC (permalink / raw)
To: Christian Moe; +Cc: Rustom Mody, emacs-orgmode
Christian Moe <mail@christianmoe.com> writes:
> $(document).ready(fntooltips);
>
> function fntooltips() {
> $(".footnum").each(
> function () {
> $("[href='#" + this.id + "']")
> .attr("title",
> this.parentNode.parentNode.textContent);
> }
> )
> }
Yes, exactly, thanks!
--
Bastien
^ permalink raw reply [flat|nested] 10+ messages in thread
end of thread, other threads:[~2014-01-16 1:28 UTC | newest]
Thread overview: 10+ messages (download: mbox.gz follow: Atom feed
-- links below jump to the message on this page --
2014-01-14 7:08 tooltips Rustom Mody
2014-01-14 15:15 ` tooltips Bastien
2014-01-14 17:46 ` tooltips Christian Moe
2014-01-14 18:40 ` tooltips Rustom Mody
2014-01-14 21:30 ` tooltips Christian Moe
2014-01-15 16:56 ` tooltips Bastien
2014-01-15 18:25 ` tooltips Rustom Mody
2014-01-15 22:14 ` tooltips Christian Moe
2014-01-16 1:27 ` tooltips Rustom Mody
2014-01-14 19:03 ` tooltips Bastien
Code repositories for project(s) associated with this public inbox
https://git.savannah.gnu.org/cgit/emacs/org-mode.git
This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox;
as well as URLs for read-only IMAP folder(s) and NNTP newsgroup(s).