From 26eb3f378df0c82b8bab5c4d38efec23cdf2d77b Mon Sep 17 00:00:00 2001 From: louisameline Date: Mon, 18 Jul 2016 14:10:11 +0200 Subject: [PATCH] Added the data-tooltip-content attribute --- doc/css/style.css | 4 ++ doc/js/scripts.js | 11 ---- index.html | 135 +++++++++++++++++++++--------------------- package.json | 2 +- src/js/tooltipster.js | 15 ++++- 5 files changed, 86 insertions(+), 81 deletions(-) diff --git a/doc/css/style.css b/doc/css/style.css index d0607ca..f3602fb 100644 --- a/doc/css/style.css +++ b/doc/css/style.css @@ -299,6 +299,10 @@ div#github { transition: none; } +#templates { + display: none; +} + pre { box-sizing: border-box; -moz-box-sizing: border-box; diff --git a/doc/js/scripts.js b/doc/js/scripts.js index e80bb38..ea7f9e9 100644 --- a/doc/js/scripts.js +++ b/doc/js/scripts.js @@ -43,16 +43,6 @@ $(function() { }); $('#demo-html').tooltipster({ - content: $( - '
' + - '' + - '

' + - 'Lorem ipsum dolor sit amet' + - '
' + - 'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu.' + - '

' + - '
' - ), // setting a same value to minWidth and maxWidth will result in a fixed width maxWidth: 400, side: 'right' @@ -209,7 +199,6 @@ $(function() { }); $('#demo-position').tooltipster({ - content: $('
I\'m the most accurate tooltip ever! Let me fit to your layout the way you want to. I\'m great to create menus too :)
'), // 8 extra pixels for the arrow to overflow the grid functionPosition: function(instance, helper, data){ diff --git a/index.html b/index.html index bc2ae39..819bbde 100644 --- a/index.html +++ b/index.html @@ -113,7 +113,7 @@

Demos

Click Custom open/close triggers
  • - Hover HTML, side, fixed size + Hover HTML, side, fixed size
  • Drag Smart positioning @@ -146,7 +146,7 @@

    Demos

    Click Position tracking system
  • - Hover
    Custom position
    + Hover
    Custom position
  • Hover Extensible with plugins @@ -156,6 +156,17 @@

    Demos


    +
    +
    + +

    + Lorem ipsum dolor sit amet
    + Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu. +

    +
    + I'm the most accurate tooltip ever! Let me fit to your layout the way you want to. I'm great to create menus too :) +
    +

    Getting Started ⇑

    @@ -227,82 +238,29 @@

    4. Style your tooltips

    5. Use HTML inside your tooltips

    -

    Tooltipster allows you to use any HTML markup inside your tooltips. It means that you can insert things like images and text formatting tags. To achieve this, you may either provide HTML content in the options, or set HTML content with a method call.

    +

    Tooltipster allows you to use any HTML markup inside your tooltips. It means that you can insert things like images and text formatting tags.

    -

    a) Providing the HTML content in the options

    +

    Instead of a title attribute, use a data-tooltip-content attribute to provide a selector that corresponds to the HTML element of your page that should be used as content. This is your HTML:

    -<head>
-    ...
-    <script>
-        $(document).ready(function() {
-            
-            $('#tooltip').tooltipster({
-                // we detach the element from the page and give it to Tooltipster to serve as content
-                content: $('#tooltip_content').detach(),
-                // if you use a single element as content for several tooltips, set this option to true
-                contentCloning: false
-            });
-        });
-    </script>
-</head>
+<span class="tooltip" data-tooltip-content="#tooltip_content">This span has a tooltip with HTML when you hover over it!</span>
 
-<body>
-    <div id="tooltip">
-        This div has a tooltip with HTML when you hover over it!
-    </div>
+<div class="tooltip_templates">
     <span id="tooltip_content">
-       <img src="myimage.png" /> <strong>This is the content of my tooltip!</strong>
+        <img src="myimage.png" /> <strong>This is the content of my tooltip!</strong>
     </span>
-</body>
    - -

    Tip: you might wish to make the #tooltip_content span initially invisible with display:none. In that case, don't forget to make it visible again before you give it to Tooltipster: content: $('#tooltip_content').detach().show()

    - -

    Notice: make sure you have tight control over the HTML content you wish to display in the tooltip, as unwanted <script> or <iframe> tags for example would be a serious security issue for your website.

    +</div> -

    b) Setting HTML content with a method call

    +

    In your CSS file, add .tooltip_templates { display: none; } so that the content does not get displayed outside of the tooltip.

    -

    While the previous method works fine when you handle one tooltip at a time, it becomes tedious when you have plenty. That's when you should start using method calls, typically during functionInit:

    +

    Important: if you have two tooltips that have the same data-tooltip-content attribute (that is to say, want to both use the same HTML element), please set the contentCloning option to true when you initialize your tooltips:

    -<head>
-    ...
-    <script>
-        $(document).ready(function() {
-            
-            $('.tooltip').tooltipster({
-                functionInit: function(instance, helper){
-                    var content = $(helper.origin).find('.tooltip_content').detach();
-                    instance.content(content);
-                }
-            });
-        });
-    </script>
-</head>
-
-<body>
-    <div class="tooltip">
-        This div has a tooltip with HTML when you hover over it!
-        <span class="tooltip_content">
-           <img src="myimage.png" /> <strong>This is the content of my tooltip!</strong>
-        </span>
-    </div>
-				
-    <div class="tooltip">
-        This other div also has tooltip with HTML
-        <span class="tooltip_content">
-           <img src="otherimage.png" /> <strong>This is the text of the second tooltip!</strong>
-        </span>
-    </div>
-</body>
    - -

    Bonus: a plugin to make it easier

    - -

    The htmlTitle plugin for Tooltipster simplifies and automates method b). You can check it out here.

    - -

    Deprecated: writing encoded HTML in the title attribute.

    +$('.tooltip').tooltipster({ + contentCloning: true +}); -

    If you write encoded HTML in the title attribute and set the contentAsHTML option to true, it will be displayed as HTML in the tooltip.

    +

    Note: there are alternative ways of setting HTML content in the tooltip, discussed in this section.

    6. Use plugins

    @@ -314,7 +272,6 @@

    6. Use plugins

    sideTip Shipped with Tooltipster and used by default

    SVG Shipped with Tooltipster, adds SVG support, not enabled by default (see the SVG section)

    follower Lets the tooltip follow the cursor. Available here

    -

    htmlTitle Makes it easier to choose which HTML element should be used as content for a tooltip. Available here

    scrollableTip Makes the tooltip scrollable when it gets too big. Available here

    discovery Creates groups of tooltips for faster display. Demonstrated in the Grouped tooltips section and available here

    @@ -766,6 +723,7 @@

    Common use cases ⇑

  • Opening and closing a tooltip: the built-in triggers
  • Opening and closing a tooltip: the method calls
  • Achieving custom positioning
    • +
  • Alternative ways of setting HTML content
  • Specifying options through data-attributes
  • Working with data sets
  • Status: getting information about the tooltip
    • @@ -1125,6 +1083,47 @@

    Achieving custom positioning ⇑ +

    Alternative ways of setting HTML content ⇑

    + +

    Instead of using the data-tooltip-content attribute, you may:

    + +

    a) Provide HTML content in the options

    + + 
    +$('#tooltip').tooltipster({
+    content: $('#tooltip_content'),
+   // if you use a single element as content for several tooltips, set this option to true
+   contentCloning: false
+});
+
    + +

    b) Set HTML content with a method call

    + +

    Tooltipster's content method allows you to edit the content of the tooltip at any time with greater flexibility. If you had this HTML for example:

    + + 
    +<div class="tooltip">
+    This div has a tooltip with HTML when you hover over it!
+    <span class="tooltip_content">
+       <img src="myimage.png" /> <strong>This is the content of my tooltip!</strong>
+    </span>
+</div>
    + +

    You could do this upon initialization:

    + + 
    +$('.tooltip').tooltipster({
+    functionInit: function(instance, helper){
+        var content = $(helper.origin).find('.tooltip_content').detach();
+            instance.content(content);
+        }
+    });
+});
    + +

    c) Deprecated: writing encoded HTML in the title attribute.

    + +

    If you write encoded HTML in the title attribute and set the contentAsHTML option to true, it will be displayed as HTML in the tooltip.

    +

    Specifiying options through data-attributes ⇑

    You may want to write options on a per-tooltip basis, directly in your HTML. Of course, you should try to do this for options which are "inlinable" only. Anyway, that's a great opportunity to make use of the functionInit option and the option method, here's how it goes:

    diff --git a/package.json b/package.json index fcce02a..da57d26 100644 --- a/package.json +++ b/package.json @@ -41,5 +41,5 @@ "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, - "version": "4.0.6" + "version": "4.1.0" } diff --git a/src/js/tooltipster.js b/src/js/tooltipster.js index dd820bd..c891085 100644 --- a/src/js/tooltipster.js +++ b/src/js/tooltipster.js @@ -506,7 +506,20 @@ $.Tooltipster.prototype = { self.__contentSet(self.__options.content); } else { - self.__contentSet(initialTitle); + + var selector = self._$origin.attr('data-tooltip-content'), + $el; + + if (selector){ + $el = $(selector); + } + + if ($el && $el[0]) { + self.__contentSet($el.first()); + } + else { + self.__contentSet(initialTitle); + } } self._$origin