Scrolling gear Scrolling gear Scrolling gear
Putting a PDF in a Tippy tooltip

It often surprises me to see the ways people come up with uses for Tippy. Someone recently asked about embedding a PDF in Tippy. Here is one way to do it:

The code for this is straightforward since (almost) any markup can be added inside a tooltip:

[tippy title="You should see a PDF in this tooltip" height="400" width="600" autoclose="false"]
<object data="http://croberts.me/wp-content/uploads/2013/08/decind.pdf" type="application/pdf" width="100%" height="100%">
    <p>Be sure to include an alternate download method. <a href="http://croberts.me/wp-content/uploads/2013/08/decind.pdf">The Declaration of Independence</a></p>
</object>
[/tippy]

The tooltip itself is fairly typical: a title, a manually specified width and height, and autoclose set to false. You will probably want to do that – prevent Tippy from automatically closing when displaying a PDF inside a tooltip. Inside the tooltip is a standard object tag which can embed the PDF in any page – in this case, embedding it inside the tooltip.

Be sure to keep in mind that some browsers or some computers might not be able to embed a PDF on a web page.


Be sure to include an alternate download method. The Declaration of Independence


8 Comments

  • Thank you so much for your response! It worked like a charm! Is there anything I can add to the code that would center the popup on the page? This would accommodate viewers with different type/size screens.

  • Chris, you are the only resource I have who is responding to my questions. I hope you do not mind my asking you about these procedural specifics. I am a professor at a university and I am creating my professional portfolio on a WordPress website to submit for promotion to full professor. My website is at marge.maxwell.com. I am working on the Teaching page and have used Tippy for my narratives and evidence of achieving the standard indicators. (There will be 57 standards spread over Teaching, Research, and Service.) It has taken me a very long time to figure this out. Now, I am about ready to add the rest of my content.

    I would like to change the text color of the “title” that is linked to a Tippy box. Here is my code but it is not changing the color of the “title” (in this case, “A. KNOWLEDGE OF SUBJECT”). Can you help?

    [tippy title="A. KNOWLEDGE OF SUBJECT (Each of the following must be evident)" headertext="A. Knowledge of Subject"] Educational technology has been a major focus of my career since 1980 when I began taking and teaching computer programming courses at the local community college. I also began teaching public school teachers and students how to use computers as an instructional tool. When I began my current tenure-track position at WKU in 2001, I brought with me over twenty years of experience in teaching others about educational technology. I have taught public school students, public school teachers, university undergraduate and graduate students, as well as university faculty. My emphasis in coursework in my doctoral program as well as my dissertation was educational technology.

    I am committed to ongoing professional development and keeping current on technology as well as teaching practices with technology. I read technology news on CNN almost daily, weekly eSchool News, ISTE publications, and other educational technology publications. I have presented at and attended fifteen national and three state conferences in the last six years.

    In 2002 our LME program became a totally online program. This presented me the opportunity to redesign our educational technology courses in an online format as well as to incorporate current ideas from the field. My course syllabi provide a learning guide for the course. All courses are a series of modules of three types: Instructional Design, Technology Skills, and Technology Integration. I revise the syllabus each semester to clarify student questions or misunderstandings, to enhance student learning and engagement, and to incorporate current research and practices.

    The next three sections demonstrate knowledge of content through course syllabi, scope and depth of student assignments, and on-going commitment to my own professional development.
    [/tippy]

    Any other comments or suggestions are indeed welcome!
    Marge

  • Hi Chris,

    Thank you for Tippy. I have put a pdf in Tippy. This works nicely if you are using Safari, all other browsers, the pdf only renders a third of the way. Is there anything I can do to make it render the whole pdf?

    Thanks again!

    Dan

    • Hi Chris,

      Fixed the issue myself. See line 2, instead of 100% in each height and width, you put in the height and width in pixels and it works perfect.

      Is there a way to make it so that the pdf opens upon clicking, instead of hover?

      [tippy title="You should see a PDF in this tooltip" height="400" width="600" autoclose="false"]
      2

      3
      Be sure to include an alternate download method. The Declaration of Independence
      4

      5
      [/tippy]

      Thanks again

Leave a comment

Your email address will not be published. Required fields are marked *