Rectangle 27 4

As others have said, your requirements are unrealistic. In environments where Javascript may be disabled, I typically will use the title attribute to get simple browser tooltips as a fallback, and then enable better looking tooltips via Javascript reading the title attributes (using a framework such as jQuery, or for my personal preference Mootools).

Code sample might be something like (using Mootools and the Tips addon):

<script type="text/javascript">
window.addEvent('domready', function() {
    // Enable the most basic default tooltips
    var tooltips = new Tips('.tips');
}
</script>

<p>This is some example text in <abbr class="tips" title="Hypertext Markup Language">HTML</abbr> with some <a href="#" class="tips" title="Tooltips are useful tools">tooltips</a> applied to some of it.</p>

html - CSS tooltip for simple text - Stack Overflow

html css tooltip
Rectangle 27 140

Here's a way that does it using the built-in ellipsis setting, and adds the title attribute on-demand (with jQuery) building on Martin Smith's comment:

$('.mightOverflow').bind('mouseenter', function(){
    var $this = $(this);

    if(this.offsetWidth < this.scrollWidth && !$this.attr('title')){
        $this.attr('title', $this.text());
    }
});

Thanks, works like a charm! However if you want to make it more efficient you might consider replacing bind() with on() like so: $(document).on('mouseenter', '.mightOverflow', function() { ... });

If you want the tooltip automatically removed if the text is no longer overflowing modify to: $(document).on('mouseenter', '.mightOverflow', function() { var $t = $(this); var title = $t.attr('title'); if (!title){ if (this.offsetWidth < this.scrollWidth) $t.attr('title', $t.text()) } else { if (this.offsetWidth >= this.scrollWidth && title == $t.text()) $t.removeAttr('title') } });

mouseenter is the event we bind to or listen for. We don't actually have to add the tooltip to the elements until someone actually mouses over them. So we defer the addition until that point of mouseenter on any one of the DOM elements with the class "mightoverflow". Just-In-Time-Tooltips

"As of jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document"

Is this solution correct? offsetWidth takes the border into account, so if the border is the same size as the overflow this suggestion will not work. (It was surfaced as an edge case for us) clientWidth seems like it would be a better option.

Sign up for our newsletter and get our top new questions delivered to your inbox (see an example).

javascript - HTML - how can I show tooltip ONLY when ellipsis is activ...

javascript html css tooltip ellipsis
Rectangle 27 138

Here's a way that does it using the built-in ellipsis setting, and adds the title attribute on-demand (with jQuery) building on Martin Smith's comment:

$('.mightOverflow').bind('mouseenter', function(){
    var $this = $(this);

    if(this.offsetWidth < this.scrollWidth && !$this.attr('title')){
        $this.attr('title', $this.text());
    }
});

Thanks, works like a charm! However if you want to make it more efficient you might consider replacing bind() with on() like so: $(document).on('mouseenter', '.mightOverflow', function() { ... });

If you want the tooltip automatically removed if the text is no longer overflowing modify to: $(document).on('mouseenter', '.mightOverflow', function() { var $t = $(this); var title = $t.attr('title'); if (!title){ if (this.offsetWidth < this.scrollWidth) $t.attr('title', $t.text()) } else { if (this.offsetWidth >= this.scrollWidth && title == $t.text()) $t.removeAttr('title') } });

mouseenter is the event we bind to or listen for. We don't actually have to add the tooltip to the elements until someone actually mouses over them. So we defer the addition until that point of mouseenter on any one of the DOM elements with the class "mightoverflow". Just-In-Time-Tooltips

"As of jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document"

Is this solution correct? offsetWidth takes the border into account, so if the border is the same size as the overflow this suggestion will not work. (It was surfaced as an edge case for us) clientWidth seems like it would be a better option.

javascript - HTML - how can I show tooltip ONLY when ellipsis is activ...

javascript html css tooltip ellipsis
Rectangle 27 13

Quentin is correct, it can't be done with CSS. If you want to add a title attribute, you can do it with JavaScript. Here's an example using jQuery:

$('label').attr('title','mandatory');

Have you included the jQuery library? See jsfiddle.net/7aZrZ/1

Yes i did but this was done in my base page where some other page can be included i dont know why its not working

can you post a link? hard to say without seeing it. try enclosing the above with $(document).ready(function() { and }); so that the jquery waits until the document (and thus target element) has loaded before running.

html - add title attribute from css - Stack Overflow

html css
Rectangle 27 13

Quentin is correct, it can't be done with CSS. If you want to add a title attribute, you can do it with JavaScript. Here's an example using jQuery:

$('label').attr('title','mandatory');

Have you included the jQuery library? See jsfiddle.net/7aZrZ/1

Yes i did but this was done in my base page where some other page can be included i dont know why its not working

can you post a link? hard to say without seeing it. try enclosing the above with $(document).ready(function() { and }); so that the jquery waits until the document (and thus target element) has loaded before running.

html - add title attribute from css - Stack Overflow

html css
Rectangle 27 15

Actually using the title attribute is the easier way ( belugabob idea)

$(function() {


  $("#slider").slider()
                .find(".ui-slider-handle")
                .attr("title", "Slide Me")

});
$(function() {

  var $slideMe = $("<div/>")
                    .css({ position : 'absolute' , top : 10, left : 0 })
                    .text("Slide Me!")
                    .hide()


  $("#slider").slider()
                .find(".ui-slider-handle")
                .append($slideMe)
                .hover(function()
                        { $slideMe.show()}, 
                       function()
                        { $slideMe.hide()}
                )

});

While I like your solution, I'm not convinced that the tooltip should be visible for the entire duration of the sliding action. By using a native browser tooltip, it will only appear for short while after the mouse enter the slider handle. All a matter of taste, I suppose.

Guess you are right - it also simplifies the code ;)

my goal was to integrate some sort of nice css tooltip. Is this possible? Or only using the title attribute?

tooltip to follow jquery slider handle? - Stack Overflow

jquery
Rectangle 27 15

Actually using the title attribute is the easier way ( belugabob idea)

$(function() {


  $("#slider").slider()
                .find(".ui-slider-handle")
                .attr("title", "Slide Me")

});
$(function() {

  var $slideMe = $("<div/>")
                    .css({ position : 'absolute' , top : 10, left : 0 })
                    .text("Slide Me!")
                    .hide()


  $("#slider").slider()
                .find(".ui-slider-handle")
                .append($slideMe)
                .hover(function()
                        { $slideMe.show()}, 
                       function()
                        { $slideMe.hide()}
                )

});

While I like your solution, I'm not convinced that the tooltip should be visible for the entire duration of the sliding action. By using a native browser tooltip, it will only appear for short while after the mouse enter the slider handle. All a matter of taste, I suppose.

Guess you are right - it also simplifies the code ;)

my goal was to integrate some sort of nice css tooltip. Is this possible? Or only using the title attribute?

tooltip to follow jquery slider handle? - Stack Overflow

jquery
Rectangle 27 1

Your explanation is a bit unclear, but you may want to try adding live() to the chain before you call attr(title,xxx). AJAX requests (asynchronous ones) load data into the DOM after the onReady function executes your script, so whatever selector you are using may be invalid at the time the script executes.

javascript jquery html - how to assign the title attribute to a .class...

javascript jquery html title
Rectangle 27 2

First of all, you should be putting that text in the "title" attribute, not "alt". The "alt" attribute should contain text to be shown when the image cannot be shown. The "title" attribute provides explanatory text that a rendering agent can use as it sees fit, and flyover text is the primary example of that. Using your example, the "alt" attribute might be "Pepsi logo", while the "title" would be the fancy value. (In this case there's not much difference, but the point is that those two attributes really are quite different in purpose.)

If you need to get those special characters in via Javascript, you have to provide the Unicode values with Javascript escapes like \uNNNN where "NNNN" are hex digits. I think that the trademark symbol, for example, would be "\u00AE" as a Javascript string.

Indeed. That was for illustrative purposes only, the real alt text is appropriate.

Secondly, thanks. Thats what I was looking for.

jquery - javascript: alt attribute with special characters - Stack Ove...

javascript jquery
Rectangle 27 2

First of all, you should be putting that text in the "title" attribute, not "alt". The "alt" attribute should contain text to be shown when the image cannot be shown. The "title" attribute provides explanatory text that a rendering agent can use as it sees fit, and flyover text is the primary example of that. Using your example, the "alt" attribute might be "Pepsi logo", while the "title" would be the fancy value. (In this case there's not much difference, but the point is that those two attributes really are quite different in purpose.)

If you need to get those special characters in via Javascript, you have to provide the Unicode values with Javascript escapes like \uNNNN where "NNNN" are hex digits. I think that the trademark symbol, for example, would be "\u00AE" as a Javascript string.

Indeed. That was for illustrative purposes only, the real alt text is appropriate.

Secondly, thanks. Thats what I was looking for.

jquery - javascript: alt attribute with special characters - Stack Ove...

javascript jquery
Rectangle 27 2

Even though there is a limitation in the number of characters for the title attribute in some browsers, it should not affect because you are using the bootstrap tooltip. It should work for long text.

The only problem i can see with your code is, you are not wrapping the text inside single quotes or double quotes. So let's say your item.Message has a value which like "FirstWord and SecondWord", your markup is going to be

<td data-toggle="tooltip" data-placement="right" 
                                           title=FirstWord and SecondWord>Message</td>

So it is going to show only FirstWord because there is a space after that.

You should wrap the value of title attribute in quotes and it will work fine.

<td data-toggle="tooltip" data-placement="right" title="@item.Message">Message</td>

javascript - How to display a database message inside a bootstrap tool...

javascript asp.net-mvc twitter-bootstrap razor twitter-bootstrap-tooltip
Rectangle 27 2

Even though there is a limitation in the number of characters for the title attribute in some browsers, it should not affect because you are using the bootstrap tooltip. It should work for long text.

The only problem i can see with your code is, you are not wrapping the text inside single quotes or double quotes. So let's say your item.Message has a value which like "FirstWord and SecondWord", your markup is going to be

<td data-toggle="tooltip" data-placement="right" 
                                           title=FirstWord and SecondWord>Message</td>

So it is going to show only FirstWord because there is a space after that.

You should wrap the value of title attribute in quotes and it will work fine.

<td data-toggle="tooltip" data-placement="right" title="@item.Message">Message</td>

javascript - How to display a database message inside a bootstrap tool...

javascript asp.net-mvc twitter-bootstrap razor twitter-bootstrap-tooltip
Rectangle 27 453

Apparently <intent-filter> can have a label attribute. If it's absent the label is inherited from the parent component (either Activity or Application). So using this, you can set a label for the launcher icon, while still having the Activity with it's own title.

Note that, while this works on emulators, it might not work on real devices, because it depends on the launcher implementation that is used.

<activity
  android:name=".ui.HomeActivity"
  android:label="@string/title_home_activity"
  android:icon="@drawable/icon">
  <intent-filter android:label="@string/app_name">
    <action android:name="android.intent.action.MAIN" />
    <category android:name="android.intent.category.LAUNCHER" />
  </intent-filter>
</activity>

Side Note: <intent-filter> can also have an icon attribute, but inexplicably it does not override the icon specified in the Activity. This may be important to you if you plan to use the native ActionBar in SDK 11+, which uses Icon and Logo specified on the Activity.

Added Info: The label is being inherited from Activity and not the Application.

<application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"       
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >

        <activity
            android:name=".StartActivity"
            android:label="@string/app_long_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

In this case, app_long_name will be displayed with launcher icon, if we do not put label inside as mentioned above.

Gee, that's great!! I'll try it tonight. Wow, why is such a thing not properly documented??!! I know why I don't like these weird XML structures... ;-)

Oh no, oh no. Disappointed now. Pure Android launchers (on emulators!) really do what we discussed here, but e.g. HTC's launcher ignores the label tag of the intent. :-( How stupid! Asus Eee Pad with Honeycomb does also NOT adhere to that label.

Works on my Gingerbread Nexus One, Nexus S as well as "newer" releases :-) But sadly, dude to the inconsistency I would recommend not using this. I'm inclined to update the answer with a warning as well.

Not working in Lollipop Nexus 4 and Nexus 5.

android - How to set different label for launcher rather than activity...

android label android-manifest titlebar launcher
Rectangle 27 453

Apparently <intent-filter> can have a label attribute. If it's absent the label is inherited from the parent component (either Activity or Application). So using this, you can set a label for the launcher icon, while still having the Activity with it's own title.

<activity
  android:name=".ui.HomeActivity"
  android:label="@string/title_home_activity"
  android:icon="@drawable/icon">
  <intent-filter android:label="@string/app_name">
    <action android:name="android.intent.action.MAIN" />
    <category android:name="android.intent.category.LAUNCHER" />
  </intent-filter>
</activity>

Side Note: <intent-filter> can also have an icon attribute, but inexplicably it does not override the icon specified in the Activity. This may be important to you if you plan to use the native ActionBar in SDK 11+, which uses Icon and Logo specified on the Activity.

Added Info: The label is being inherited from Activity and not the Application.

<application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"       
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >

        <activity
            android:name=".StartActivity"
            android:label="@string/app_long_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

In this case, app_long_name will be displayed with launcher icon, if we do not put label inside as mentioned above.

Gee, that's great!! I'll try it tonight. Wow, why is such a thing not properly documented??!! I know why I don't like these weird XML structures... ;-)

Oh no, oh no. Disappointed now. Pure Android launchers (on emulators!) really do what we discussed here, but e.g. HTC's launcher ignores the label tag of the intent. :-( How stupid! Asus Eee Pad with Honeycomb does also NOT adhere to that label.

Works on my Gingerbread Nexus One, Nexus S as well as "newer" releases :-) But sadly, dude to the inconsistency I would recommend not using this. I'm inclined to update the answer with a warning as well.

Not working in Lollipop Nexus 4 and Nexus 5.

android - How to set different label for launcher rather than activity...

android label android-manifest titlebar launcher
Rectangle 27 2

You can find all img elements that have an alt and don't have a title by using jQuery's $() function with the CSS selector img[alt]:not([title]). Then use jQuery's attr function to assign a title attribute to them from alt. You probably want to use jQuery's "ready" feature to do it when the page is loaded, since Wordpress makes putting scripts in the right place problematic I'm told:

$(function() {
    $("img[alt]:not([title])").attr("title", function() {
        return this.alt;
    });
});

If you're not already using jQuery, you don't need to add it for this. Here's a near equivalent to the above without it that works in all vaguely-modern browsers:

document.addEventListener("DOMContentLoaded", function() {
    Array.prototype.forEach.call(document.querySelector("img[alt]:not([title])", function(img) {
        img.title = img.alt;
    });
}, false);

If you need to support obsolete browsers without addEventListener, this answer has a cross-browser option for you. Said browser will also need a polyfill for forEach, which is described in the linked page above.

javascript - image title instead of alt - Stack Overflow

javascript php html wordpress
Rectangle 27 1

not the default one. you can draw your own using a floating div that shows like the tooltip and fill it up with text it gets from the title attribute.

javascript - Is it possible to generate a tooltip for keyboard travers...

javascript html css
Rectangle 27 2

If accessibility is not an issue, I see no issues using JavaScript to remove the content. Assuming you're OK with using jQuery, this is the easiest way in my opinion:

$(document).ready(function()
{
    $('[title]').removeAttr('title');
});

You could also remove the title content in the onmouseover event and then add it back on the onmouseout event for the sake of SEO.

Well considering most all search engines do not read Javascript fully (yet), I don't think I need to add it back. Although would be a good idea to comply with the future of search engine spiders.

javascript - Image Alt and Title Attributes - Stack Overflow

javascript html tooltip accessibility image
Rectangle 27 14

FYI for for anyone coming across the problem described in the title (as I did) who is also using the AngularUI Router plugin...

However, as the answer states, you can turn off this behavior by saying autoscroll="false" on your ui-view.

<div ui-view="pagecontent" autoscroll="false"></div>
<div ui-view="sidebar" autoscroll="false"></div>

Mine doesn't jump to the bottom, it just retains the scroll position instead of going to the top.

This doesn't answer the question. I've got the same problem - when the route changes the scroll level just stays in the same place instead of scrolling to the top. I can get it to scroll to the top, but only by changing the hash, which I don't want to do for obvious reasons.

javascript - Changing route doesn't scroll to top in the new page - St...

javascript angularjs scroll angularjs-routing
Rectangle 27 17

Use .dialog("widget") option to locate the div wrapper for the dialog. The wrapper contains all the markup used for the dialog including header, title bar and close button; and the dialog content itself. Here is one way to invoke the method and hide the title bar:

$("#id").dialog({
    autoOpen: false
}).dialog("widget").find(".ui-dialog-title").hide();

You can then use CSS to eliminate unnecessary margin, border and padding. For example:

.ui-dialog-titlebar {
    float: right;
    border: 0;
    padding: 0;
}
.ui-dialog-titlebar-close {
    top: 0;
    right: 0;
    margin: 0;
    z-index: 999;
}

Here is a demo based on above code plus it adds the necessary styles using jQuery.

.ui-dialog-titlebar
.ui-dialog-titlebar-close
.ui-dialog-title

javascript - How to remove jQuery-ui dialog title bar? - Stack Overflo...

javascript jquery css jquery-ui jquery-ui-dialog
Rectangle 27 2

Here's a solution using PHP's DOM parser:

$domd = new DOMDocument();
libxml_use_internal_errors(true);
$domd->loadHTML(file_get_contents("http://stackoverflow.com"));
libxml_use_internal_errors(false);

$items = $domd->getElementsByTagName("img");
$data = array();

foreach($items as $item) {
  $data[] = array(
    "src" => $item->getAttribute("src"),
    "alt" => $item->getAttribute("alt"),
    "title" => $item->getAttribute("title"),
  );
}

question. The images are stored in a variable called $content.. can I use it instead of loading html or new document? How?

$domd->loadHTML($content)

Wow :D It worked from the first attempt.. Okay thats simpler than regex. If some images do not have alt or title it won't stop the script i assume

Sign up for our newsletter and get our top new questions delivered to your inbox (see an example).

regex - Using PHP to extract the alt and/or title attributes from imag...

php regex