emacs-orgmode@gnu.org archives
 help / color / mirror / code / Atom feed
* 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 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

* 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-15 22:14             ` tooltips Christian Moe
@ 2014-01-16  1:27               ` Rustom Mody
  0 siblings, 0 replies; 10+ messages in thread
From: Rustom Mody @ 2014-01-16  1:27 UTC (permalink / raw)
  To: Christian Moe; +Cc: emacs-orgmode

On Thu, Jan 16, 2014 at 3:44 AM, Christian Moe wrote:
>
> Rustom Mody writes:
>
>> Thanks Christian for that.
>> Just one small thing -- Can we remove the number?
>
> Sure, try this new version of fntooltip.js:

Super! Thanks Christian!

^ 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 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).